快捷導(dǎo)航

Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式

更新時(shí)間：2023年10月13日 10:51:02 作者：weixin_51204324

這篇文章主要介紹了Vue3中Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue3 Element Plus Table(表格)點(diǎn)擊獲取對(duì)應(yīng)id

網(wǎng)上搜到的內(nèi)容或許適用于 Vue 2 或 Element UI，不適用 Vue 3 和 Element Plus。

Template

<el-table-column label="配置" width="120" align="center">
  <template **v-slot="scope"**>
    <el-button link type="primary" size="small">編輯</el-button>
    <el-button link type="primary" @click="deleteNavigation(scope.row.id)" size="small">刪除
    </el-button>
  </template>
</el-table-column>

Script

function deleteNavigation(id) {
  console.log(id);
}

使用 Vue 的 v-slot 指令，這個(gè)指令中是 Vue 2.6 新增的，取代了以前的 slot 和 slot-scope，而我使用的是 Vue 3，所以網(wǎng)上搜到的很多使用 slot-scope 的方法都失效了。

使用 插槽名.row 可以獲取一行的內(nèi)容，如果要獲取行內(nèi)的某一個(gè)字段的值，只需要再點(diǎn)出它的字段名，在我的代碼里，就是 scope.row.id。

如果要獲取行的索引，使用 插槽名.$index，注意 $ 符號(hào)是必不可少的，否則將不起作用。

Vue3 elementPlus:下拉選擇框同時(shí)獲取到選中的id和數(shù)據(jù)

//在<el-option>里綁定@click事件

//html
<el-select
            value-key="id"
            v-model="filterText"
            multiple
        >
          <el-option
              v-for="item in Lists"
              :key="item.id"
              :label="item.name"
              :value="item"
              @click.native="changeGateway(item)"
          />
        </el-select>

//js
const changeGateway=(val)=>{
 if (val.state ===0) {//如果state 為0則按鈕變?yōu)?
		val.state =1
	// console.log(val.state ,'點(diǎn)擊顯示');
 }else if(val.state ===1){//如果state 為1則按鈕變?yōu)?
	    val.state =0
    // console.log(val.state ,"隱藏");
 }//接口
     update({
     id:val.id,
     state :val.state 
        }).then((res)=>{
		Datas=JSON.stringify(res.data.data)
		// console.log(store.state.clickHeaderDatas);		
		getlist()	//此封裝函數(shù)里綁定了v-model的回顯	
  })
}
 const getlist = () => {
              //接口
				list({}).then((res) => {
				let showArr  = res.data.data.filter((item)=>{
  			    return String(item.state)== 1;
				})
				// console.log(showArr,"showArr");//過濾掉為1的數(shù)據(jù)
				Lists = res.data.data
				res.data.data?.map((v)=>{
         //如果state為1則顯示,0隱藏
					if (v.state==1) {
					filterText = showArr //顯示選擇器v-model
						}
				})
			})
		}