element-ui 表格展开的图标改为自定义图标

应UI小姐姐的需求，要把element-ui表格组件里的展开图标换得美观一点！效果如下：

BERORE：

AFTER：

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

.el-table__expand-column .cell {
            display: none;
}

 

2.引入自定义图标

这里我引入的是阿里矢量库的图标

3.添加判断控制图标显隐，添加事件控制

    1）给每一行表格数据添加expansion属性，默认false

tableData: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          expansion:false,
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          expansion:false,
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          expansion:false,
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333',
          expansion:false,
        }]

       2）给图标加判断条件和单击触发事件

        expend(row){
            let $table = this.$refs.table;
                this.tableData.map((item) => {
                    if (row.id != item.id) {
                        $table.toggleRowExpansion(item, false)
                        item.expansion = false
                    }
                    else{
                        item.expansion = !item.expansion
                    }
                })
                $table.toggleRowExpansion(row);
               
        },

完整代码：