el-table复选框根据某个字段默认选中且不可取消

主要代码:   :selectable="checkSelectable"用来锁定复选框,让默认选中的复选框不能取消选中

<el-table
          ref="multipleTable"
          :key="tableKey"
          v-loading="listLoading"
          class="pay-list"
          :data="list"
          @selection-change="handleSelectionChange"
          @row-click="btn"
        >
          <el-table-column type="selection" :selectable="checkSelectable" />
          <!-- 收费名称 -->
          <el-table-column :label="$t('aaa.name')" width="250px" align="left" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.proName }}</span>
            </template>
          </el-table-column>
        </el-table>

2.methods中(fffff为判定是否不能更改的字段)

checkSelectable(row){
      return row.fffff!=='1'
   },

在getList中写入foreach,用于遍历判断是否为默认必选项(multipleTable为对应el-table中的ref后的参数),使用

this.$refs.multipleTable.toggleRowSelection(item,true)来实现
 getList(proId) {
      this.listLoading = true
      getTuitionAndDormList(
        this.$store.getters.idserial,
        proId
      ).then(response => {
        this.list = response.data
        this.$nextTick(function(){
     this.list.forEach(item => {if(item.fffff === '1'){
          this.$refs.multipleTable.toggleRowSelection(item,true)
          }
        })
        })
        this.listLoading = false
      })
    }

 

posted @ 2022-10-20 16:30  joyfulest  阅读(1312)  评论(0)    收藏  举报