关于element-ui中,页面上有多个el-table并通过v-if、v-else等控制是否显示时,type=selection勾选框失效或不显示的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
刚开始是勾选框那一列直接空了什么都不显示,搜索了一下说是给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;
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)