elementui[el-table]toggleRowSelection默认多选事件无法选中问题
问题
今天发现了一个elment el-table toggleRowSelection事件无法默认选中的情况,
我的需求可能需要对内容进行一部分修改,比如:我默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中
解决方式
// 这里通过循环选中列表multipleSelection,然后从所有列表tableData中找到需要选中的项来帮助选中,直接使用选中列表来设置可能会出错 toggleSelection(rows) { // multipleSelection是一个选中数据列表 // tableData 是所有的数据列表 this.multipleSelection.forEach(row => { // 不能自己自定义对象来设置选中(原因如下分析),那我可以从列表中找到需要选中的那个对象,然后把它拿过来作为选中的项就可以了 this.$refs.multipleTable.toggleRowSelection(this.tableData.find(item=>{ return row.name == item.name; // 注意这里寻找的字段要唯一,示例仅参考 }),true); }); }
另外一种无法选中的方式
原因可能在于vue组件和表格的渲染顺序问题。如:代码执行的时候页面渲染还未完成。(表格放在dialog之类的弹出框里面)
解决方式:
在循环的外层加个$nextTick即可
this.$nextTick(()=>{ this.multipleSelection.forEach(row => { console.log(row); // 这里仅仅加了个打印操作 this.$refs.multipleTable.toggleRowSelection(this.tableData.find(item=>{ return row.name == item.name; // 注意这里寻找的字段要唯一,示例仅参考 }),true); }); })
分析
自己研究了一下elementUI el-table 的多选内容:
官方代码如图:
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template>
<script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; } } } </script>
上面的代码就是官方代码、使用效果如下:
从图中看,确实可以进行行数的默认选中
(以上都是官方内容);
然而我的需求可能需要对内容进行一部分修改,比如:我默认选中的内容必须得通过接口或者其他方式来获取,然后再默认选中
示例如下:
// 这个假如是通过接口或者其他形势获得的某个选中行内容 // 注意这里多了几个字段 multipleSelection: [ { date: "2016-05-07", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", description: '这里是描述', type: '类型', id: 'aaaaa111111' } ]
// 因此我的选中代码必须得改成如下: toggleSelection() { // 循环multipleSelection,然后将内容提取出我要的字段 // 使其于table表行字段对应 this.multipleSelection.forEach(row => { let arr = { date: row.date, name: row.name, address: row.address }; // 设置默认选中列 this.$refs.multipleTable.toggleRowSelection(arr,true); }); }
理论上上面的内容应该能让表格中的某一列进行选中,
然而现实是不行的
从上面可以看出来,首部有选择效果,但是却内容选中内容。
现在对官方示例分析:
toggleSelection(rows) { if (rows) { rows.forEach(row => { console.log(row); // 这里仅仅加了个打印操作 this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }
效果如下:此时可以选中
然后对代码进行细微修改
toggleSelection(rows) { if (rows) { rows.forEach(row => { // 区别仅仅是将内容放在arr对象里面了,用于提取需要的字段 let arr = { date: row.date, name: row.name, address: row.address } console.log(arr); // 打印操作 this.$refs.multipleTable.toggleRowSelection(arr); }); } else { this.$refs.multipleTable.clearSelection(); } }
效果如下:首部选中,其他行却没选中
这是为什么呢?明明传入的同样是一个对象啊,而且字段名称与数量都是一样的,然而结果却不同?
对比两个打印的内容发现问题:两个打印的字段是有一点点细微的区别的。然而我个人实力有限,无法找到区别的原理是什么!哎!
有可能是官方的一个Bug,也可能是官方设计如此,可以去官方git上逛逛:
https://github.com/ElemeFE/element/issues
但是问题却也是可以解决的(在最上面)。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法
密码或者其他比较重要东西假如使用明文传输中是很危险的,所以就需要前端一些加密协议,对密码、手机号、身份证号等信息进行保护,下面这篇文章主要给大家介绍了关于vue项目中使用md5加密、crypto-js加密、国密sm3及国密sm4的相关资料,需要的朋友可以参考下2022-12-12
最新评论