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

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

官方：

实现效果：
可以换成自己需要的图片或者文字

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

<style>
/* 隐藏原有箭头图标 */
.el-table__expand-column .cell {
  display: none;
}
</style>

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>

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);

    },
    },

5、在table上添加： ref=“topicTable”