关于element-ui中,页面上有多个el-table并通过v-if、v-else等控制是否显示时,type=selection勾选框失效或不显示的问题

刚开始是勾选框那一列直接空了什么都不显示,搜索了一下说是给el-table标签增加id,加了之后是显示了,但是点击任何选框都会直接取消全部选中效果,翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事,烦了,干脆自己写勾选框了。首先把type=selection的列修改一下:

复制代码
 <!-- 原来: -->
<el-table-column
      type="selection"
      width="55"
      align="center"
/>
 <!-- 现在: -->
<el-table-column
    width="55"
    align="center"
>
    <template
        slot-scope="{row}"
        slot="header"
    >
        <el-checkbox 
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange">
        </el-checkbox>
    </template>
    <template slot-scope="scope">
         <el-checkbox v-model="scope.row.checked" @change="handleCheckedChange"/>
    </template>
</el-table-column>

获取数据的时候记得加上checked用于绑定是否选中:

复制代码
var ids = '' //已被选中保存过的id们 另外一个接口获取 我就不写了
//列表数据 接口获取过了
this.listData.forEach((element, index) => {
    //在已保存列表里 选中
    if (ids.indexOf(element.id) != -1) {
        this.$set(this.listData[index], 'checked', true)
    } else {
        this.$set(this.listData[index], 'checked', false)
    }
})

勾选事件:

复制代码
//单个checkbox选中/不选事件
    handleCheckedChange (value) {
      let checkedCount = value.length;
      //判断是否变成了全选/全不选 置状态
      this.checkAll = checkedCount === this.listData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.listData.length;
    },
    //全选/全不选切换
    handleCheckAllChange (val) {
      //改变每一条的选中状态
      this.listData.forEach((element, index) => {
        this.$set(this.listData[index], 'checked', val)
      })
    //全选框的状态 单纯显示
      this.isIndeterminate = false;
    },
相关推荐
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者13 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder14 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui1 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js