使用Element時默認(rèn)勾選表格toggleRowSelection方式

更新時間：2022年10月21日 10:52:50 作者：xiongdaandxiaomi

這篇文章主要介紹了使用Element時默認(rèn)勾選表格toggleRowSelection方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Element時默認(rèn)勾選表格toggleRowSelection

頁面效果

在頁面初始化加載時將表格中某行默認(rèn)選中

在這里插入圖片描述

使用方法：toggleRowSelection

方法名	說明	參數(shù)
toggleRowSelection	用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中）	row, selected

table表格渲染

方法名說明參數(shù)toggleRowSelection用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中）row, selectedtable表格渲染

      <el-table :data="listPowerSupplyTab" border ref="listPowerSupplyTab" width="100%"
                     @selection-change="handleSelectionChange">
                        <el-table-column  type="selection"  width="55">
                            </el-table-column>
                        <el-table-column
                            prop="powerSupplyStationName"
                            label="供電所名稱"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="powerSupplyStationAddress"
                            label="供電所地址"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="contacts"
                            label="聯(lián)系人">
                        </el-table-column>
                        <el-table-column
                            prop="telephone"
                            label="電話">
                        </el-table-column>
                        <el-table-column
                            prop="powerSupplyMode"
                            label="供電方式 ">
                        </el-table-column>
                        <el-table-column
                            prop="capacity"
                            label="配電容量 ">
                        </el-table-column>
                        <el-table-column
                            prop="subordinatePowerSupplyBureau"
                            label="所屬供電局 ">
                        </el-table-column>
                        </el-table>

注意：

1、注意el-table上有一個ref="listPowerSupplyTab"的屬性

2、toggleRowSelection(row, selected)接受兩個參數(shù)，row傳遞被勾選行的數(shù)據(jù)，selected設(shè)置是否選中

使用watch監(jiān)聽listPowerSupplyTab數(shù)據(jù)

watch:{
        listPowerSupplyTab(n,o){
            this.$nextTick( ()=> {
                this.$refs.listPowerSupplyTab.toggleRowSelection(this.listPowerSupplyTab[0],true);
            })
        },
    },

ref引用到Dom元素上，再執(zhí)行dom上的toggleRowSelection方法。

當(dāng)頁面有隱藏顯示的tab頁簽時

因為一次性加載數(shù)據(jù)，因而監(jiān)聽active的變化

watch:{
        //監(jiān)聽active 
         active: {
            handler(n,o){
             this.$nextTick(()=> {
                  if(n == '6'){
                   this.listPowerSupplyTabNew.forEach((ele,indexItem) => {
                        if(ele.type=='1'){
                            this.$refs.listPowerSupplyTabRef.toggleRowSelection(ele);
                        }
                    })
                  }else if(n == '7'){
                   this.technicalInformationNew.forEach((ele,indexItem) => {
                        if(ele.type=='1'){
                            this.$refs.technicalInformationNewRef.toggleRowSelection(ele);
                        }
                    })
                  }
               
            })
        },
            immediate: true,
            deep: true
        },
        
    },

element表格默認(rèn)勾選不生效的問題

默認(rèn)勾選可以這樣做

 this.$refs.multipleTable.toggleRowSelection(row);

如果不生效的話，一般需要考慮這幾種情況

1、獲取數(shù)據(jù)（選中的數(shù)據(jù)以及表格展示的數(shù)據(jù)）這里的兩個數(shù)據(jù)必須是同一個對象的數(shù)據(jù)，也就是數(shù)據(jù)必須是表格當(dāng)中的數(shù)據(jù)，而且不能深拷貝

2、設(shè)置表格數(shù)據(jù)

3、設(shè)置完成后，一般我們都是獲取到后端的代碼再設(shè)置this.$refs.multipleTable.toggleRowSelection(row);

這里還要加一個$nextTick

具體代碼如下：

    /**
     * @description: 獲取表格數(shù)據(jù)
     * @param {String} code
     * @param {String} srcType
     */
    async getTableData(code, srcType) {
      try {
        this.tipContent = 'loading'
        const { result } = await querySubTabDefine({
          tableSrcType: srcType,
          subjectCode: code
        })
        for (const item of result) {
          item.select = item.flag === '1'
        }
        this.tableData = result
        this.$nextTick(() => {
          for (const row of this.tableData) {
            row.select && this.$refs.table.toggleRowSelection(row, true)
          }
        })
        // console.log(selectArr)
        this.tipContent = this.tableData.length ? false : 'empty'
        this.layoutTable()
      } catch (error) {
        console.error(error)
        this.tipContent = 'error'
        this.tableData = []
      }
    },

其中最主要是這一步

    this.$nextTick(() => {
          for (const row of this.tableData) {
            row.select && this.$refs.table.toggleRowSelection(row, true)
          }
        })

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: