首页分享 Element

Element

来源：花匠小妙招时间：2024-11-16 08:03

Element-Ui 表格展开的图标改为自定义图标

官方：
在这里插入图片描述
实现效果：
可以换成自己需要的图片或者文字

1.添加css隐藏原有箭头图标：

2.引入自定义图标（可换成文字） / 给图标加判断条件和单击触发事件：

<el-table-column label="操作"> <template slot-scope="scope"> <i v-show="!scope.row.expansion" class="el-icon-caret-right" @click="expend(scope.row)"></i> <i v-show="scope.row.expansion" class="el-icon-caret-bottom" @click="expend(scope.row)"></i> </template> </el-table-column> 12345678910

3.添加判断控制图标显示隐藏
给每一行表格数据添加expansion属性，默认false

我这是后台请求回来的数据
在这里插入图片描述
4、添加事件控制

methods:{ expend (row) { this.masterList.map((item) => { console.log(row.id, item.id) if (row.id != item.id) { this.$refs.topicTable.toggleRowExpansion(item, false)//需在table上添加 item.expansion = false } else { item.expansion = !item.expansion } }) this.$refs.topicTable.toggleRowExpansion(row); }, },

12345678910111213141516

5、在table上添加： ref=“topicTable”
在这里插入图片描述