刚开始是勾选框那一列直接空了什么都不显示,搜索了一下说是给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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐