关于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;
    },
相关推荐
鹏多多16 分钟前
Vue项目i18n国际化多语言切换方案实践
前端·javascript·vue.js
一只小风华~24 分钟前
Vue: 侦听器(Watch)
前端·javascript·vue.js
GDAL26 分钟前
Knockout.js 备忘录模块详解
javascript·knockout
蓝胖子的多啦A梦40 分钟前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
掘金安东尼42 分钟前
前端周刊431期(2025年9月8日–9月14日)
前端·javascript·github
Bear on Toilet1 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
江城开朗的豌豆1 小时前
Axios拦截器:给你的请求加上"双保险"!
前端·javascript·react.js
晓得迷路了1 小时前
栗子前端技术周刊第 98 期 - NPM 生态遭受攻击、Rspack 1.5.3、Storybook 10 beta...
前端·javascript·css
江城开朗的豌豆1 小时前
解密DVA:React应用的状态管理利器
前端·javascript·react.js
码猿宝宝1 小时前
浏览器中javascript时间线,从加载到执行
开发语言·javascript·ecmascript