元素ui表实现了点击一行展开的功能

前言

元素ui是vue非常好的UI框架。元素封装了table并简化了vue对table的呈现。

元素ui表中的一个功能是展开行。在官网2.0版本的例子中，只能点击右箭头展开。我们的许多需求是点击某一行进行扩展

这不可能吗？其实借助元素ui的一些属性，很容易点击一行展开。我们还是用官网2.0.9版本的例子。

对齐转换，以便它可以做到这一点

模板El-table : data=' tableData5 ' style=' width : 100% ' row-key=' ID ' : expand-row-key=' expands ' @ row-click=' row click ' El-table-column type=' expand '模板slot-scope=' props ' El-form label-position=' left ' inline class=' demo-table-expand ' El-form-item label=' commodity ' span { { props . row . name } }/span/El-table-expand} .演示-表格-展开标签{ width: 90pxcolor: # 99a9bf} .演示-表格-展开。El-form-item { margin-right : 0；保证金-底部： 0；宽度：50%；}/stylescript导出默认{ data(){ return { tabledata 5:[{ ID 3360 ' 12987122 '，name3360 '好味道的鸡蛋'，category: '江浙小吃和小吃'，Desc: '荷兰优质淡奶，奶香而不腻'，address: '上海市普陀区镇北路'，shop: '王小虎夫妇店'，Shop ID : ' 10333 ' } }类别： '江浙小吃，小吃和小吃'，描述： '荷兰优质淡奶，奶香而不腻'，地址： '上海市普陀区镇北路'，店铺： '王小虎情侣店'，店铺ID 3360' 10333'}，{ID :' 1299 Name: '好子郝伟鸡蛋'，类别： '江浙小吃，小吃和小吃'，描述3:{id: '12987126 '，名称： '浩子郝伟鸡蛋'，类别： '江浙小吃，小吃和小吃'，描述： '荷兰优质淡奶，浓郁不腻奶'，地址： '上海市普陀区镇北路'，商店： '王小虎商店Id: '10333' }]，//待扩展的行，数字元素是row expands的关键值if (index -1) { this.splice(index，1)；} };if(this . expands . indexof(row . id)0){ this . expands . push(row . id)；} else { this . expands . remove(row . id)；}}} }/script可以直接复制运行，完全没有问题。以上代码可以通过点击某一行进行扩展。与官方网站的例子相比，我们将其添加到表格中

row-key=' id ' : expand-row-key=' expands ' @ row-click=' row click '这里有两个问题：

1.如果数据中的每个项目都没有唯一的标签，该怎么办？

2.当当前行展开时，其他行可以关闭

这两个问题也很简单。第二个问题是在rowClick函数添加扩展之前清空这个数组。

if(this . expands . indexof(row . id)0){ this . expands=[]this . expands . push(row . id)；} else { this . expands . remove(row . id)；}摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。