随手记：vue2 使用element UI table表格的单选多选反选思路-Toy模板网

这篇具有很好参考价值的文章主要介绍了随手记：vue2 使用element UI table表格的单选多选反选思路。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

selection-change 参数只有一个selection ：可以获取到当前勾选的row的数据，勾选自动行程数组
@selection-change="handleSelectionChange"

// 多选框选中数据

handleSelectionChange(selection) {

//selection 是勾选中的数组

},
select 参数 selection 选中的数组 row 当前选中的单条数据

@select="handleSelectOne"

// 多选框选中单条数据

handleSelectOne(selection, row) {

console.log(selection, row)

select-all 参数 selection 全选选中的数组
@select-all="handleSelectAll"

// 多选框全选

handleSelectAll(selection) {

console.log( selection)

场景1：
实现思路：table勾选后获取勾选数据，可以使用selection-change返回的selection就是勾选中的数据
场景2：
tableA在弹窗中，打开弹窗tableA勾选后获取勾选数据，关闭数据，数据回显另一个tableB，再次打开弹窗tableA，要展示刚刚已经选中的数据
实现思路：
黄色的那一步还是selection-change返回的selection就是勾选中的数据给到tableB，
蓝色的那一步需要在打开弹窗获取到接口数据后，把选中的数组数据和tableB的接口数据做匹配，筛选出id相等的数据，使用表格toggleRowSelection回显勾选
（tips:接口中操作是为了可以实现分页翻页勾选不会被重置,$nextTick一定要加上，因为需要作用在弹窗打开之后才能$refs获取到表格）
例如：

    // 假设这是一个获取后台服务器的接口数据
      associatedDrugs(this.queryParams).then(response => {
        //获取到数据之后复制给到弹窗Table
        this.dialogTableList = response.rows;
        //打开弹窗
        this.dialogVisible = true;
        // 切换分页或者tab保持原来选择的已有数据打勾
        this.$nextTick(() => {
          //this.selectionList原来已经选中的数据
          this.selectionList.forEach(item => {
            let checkItem = this.dialogTableList.find(v => v.id == item.id);
            if(checkItem) {
                //this.$refs.dialogTable获取到你自己定义的弹窗表格ref
              this.$refs.dialogTable.toggleRowSelection(checkItem);
            }
          })
        })
      })

场景3：
取消勾选的思路，原有选中数据需要再次点击，打勾被去掉应该去掉数据，用 select，两个参数，判断selection中不包含row，就是取消行为，取消时，把选中的数组中的当前row做splice删除
场景4：
全选时使用select-all，全选时，因为只能全选当前页，所以有分页时要考虑到其他页面的原选择数据。所以全选时，先把所有选中的数据都concat进去，再去重数据。反全选也会触发select-all
场景5：
全选后再单独去掉某一个，会先触发select-all，再触发select文章来源地址https://www.toymoban.com/news/detail-858259.html

    // 选择商品药品表格选择单个
    handleSelectOne(list, row) {
      // 去掉勾选
      let rowIndex = list.findIndex(e => e.id == row.id);
      if(rowIndex == -1) { 
        let index = this.selectionList.findIndex(v => v.id == row.id);
        this.selectionList.splice(index, 1);
      }
      // 选中的数据去掉相同的缓存到selectionList
      list.forEach(item => {
        let index = this.selectionList.findIndex(v => v.id == item.id);
        if(index == -1) {
          this.selectionList.push(item);
        }
      })
    },
    // 选择商品药品表格全选
    handleSelectAll(list) {
      if(list.length) {
        // 全选concat新选，去掉重复数据
        let arr = JSON.parse(JSON.stringify(this.selectionList));
        arr = arr.concat(list);
        this.selectionList = this.removeSameData(arr);
      }else {
        // 反选操作，要保留分页的其他原有数据
        let arr = JSON.parse(JSON.stringify(this.selectionList));
        this.dialogTableList.forEach(item => {
          arr = arr.filter(e => e.id != item.id);
        })
        this.selectionList = arr;
      }
      console.log(this.selectionList)
    },

到了这里，关于随手记：vue2 使用element UI table表格的单选多选反选思路的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！