elements ui vue table 多选操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了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”文章来源地址https://www.toymoban.com/news/detail-595622.html

<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;
    },