elements ui vue table 多选操作

前言:总结一下 elements ui vue 框架使用中出现的问题，目前来看vue 的开发代码的质量和效率 要高于传统的 js 框架，至少在管理系统的开发上面，代码量相对比较小

可以参考 elements ui 官网
https://element.eleme.io/#/zh-CN/component/table#table-column-scoped-slot

具体在实际使用中基本都是带分页的，此处的要点

选中对象方法

@selection-change=“handleSelectionChange”

触发选择操作，每次会传 list 数据对象集合

返回选中对象方法

toggleSelection 方法

将数据 给table 对象 编辑的时候保持 选中状态

完成操作方法

finishSel 获取所有的选择项

标识唯一的table 行方法

getRowKeys

其他注意项

ref=“multipleTable”
多选 table 类型

:row-key=“getRowKeys”

标识 唯一 table 行

type=“selection”

<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
	 :row-key="getRowKeys"
    style="width: 100%"
    @selection-change="handleSelectionChange">
<el-table-column
          type="selection" :reserve-selection="true"
          width="55"></el-table-column>




getRowKeys(row) {
      return row.id // id 能标识唯一的 table 行;
    },

toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
					// 定义相关逻辑 添加到  业务数据中
					// 根据数据 返回table 选中状态
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      }

  handleSelectionChange(val){
		// val 为 返回的table list 选中的集合

}

 finSel(){
      this.form.aaList= this.selList;
      this.dialogRelateVisible = false;
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40