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 @   joyfulest  阅读(1173)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示