自定义Element-UI Table展开行expand图标

①Table展开行

使用方法是：

<el-table-column type="expand">
<template></template>
</el-table-column>`

主要功能：展开点击行或者特定行，在模板中定义展开行内容。
如果需要展开特定的行需要在<el-talbe中使用row-key跟expand-row-keys：

 <el-table
      :row-key="getRowKey"
      :expand-row-keys="expands">

其中getRowkey是返回值为特定行key的方法，expands是data中定义的空数组用于存储展开行的key数据。

②自定义展开图标

★可以看到这个展开行图标.el-icon-arrow-right的图标定义是 content:"\E6E0" 代表右箭头，点击后旋转90度变为下箭头。
★如果我改为"\E6E1" 他就会变为上箭头。然后点击后旋转180度依旧会变为下箭头。

在样式中定义：

.el-table__expand-column .cell {
        .el-table__expand-icon--expanded{ // 这是点击后的旋转角度
           transform: rotate(180deg);
          }
       .el-table__expand-icon{
         .el-icon-arrow-right:before { // 这是展开图标
            content: "\E6E1";
          }
     }
 }

一个是旋转角度，一个是icon图标。
就这么简单。

————————————————————————————

👉推荐！！！【腾讯云】爆款2核4G云服务器首年74元/年

👉推荐！！！【腾讯云】1核2G5M轻量应用服务器50元/年

【腾讯云】云数据库低至9.9/年！MySQL7.4元/月

【阿里云】ECS云服务器特惠

【阿里云】服务器首购优惠

如果文章对您有帮助，扫个红包码呗