前言:总结一下 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;
},