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

最新推荐文章于 2024-07-18 17:54:45 发布

EruruI

最新推荐文章于 2024-07-18 17:54:45 发布

阅读量9.5k

点赞数 1

分类专栏： Vue.js ElementUI Table 文章标签： java vue.js css javascript 前端

本文链接：https://blog.youkuaiyun.com/lsy1162526799/article/details/106472660

版权

Vue.js 同时被 3 个专栏收录

8 篇文章

订阅专栏

ElementUI

4 篇文章

订阅专栏

Table

1 篇文章

订阅专栏

①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";
          }
     }
 }