修改element-ui table组件展开/收起图标、支持点击行展开/收起、隐藏不可展开行得图标

Element中table默认支持的,展开和收起功能,如下:

针对表格的展开收起,本文改造的主要有3点:

1、修改展开/收起的图标;

2、对于不支持展开/收起的行,隐藏图标;

3、点击行,就可以展开/收起对应的内容。

1、修改图标

这个单纯的样式还是挺好改的。

javascript 复制代码
<el-table class="table-wrap"></el-table>

<style lang="less">
.table-wrap {
  .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table__expand-icon .el-icon-arrow-right:before {
    content: "\e6d9";
    border: 1px solid #ccc;
    padding: 1px;
  }
  .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e6d8";
  }
}
</style>

效果如下:

2、不可展开行,隐藏图标

这个实现是通过给el-table中不可展开的行,增加一个样式,利用el-table行的 className 的回调方法row-class-name

javascript 复制代码
<el-table :row-class-name="getRowClass"></el-table>

methods: {
    getRowClass({ row }) {
      if (!row.children) return "hide-expand";
    }
}

<style>
  // 没有展开行时,隐藏展开/折叠操作按钮
  .hide-expand {
    td:first-child .cell {
      visibility: hidden;
    }
  }
</style>

效果如下:

3、点击行,展开/收起

利用el-table的row-click事件和toggleRowExpansion方法。

同时可以进行限制只能展开一行,还是都可以展开。

本文完整代码:

javascript 复制代码
<template>
  <div>
    <el-button type="primary" @click="openAll = true">可展开全部</el-button>
    <el-button type="primary" @click="openAll = false">只能展开一个</el-button>
    <el-table
      :data="tableData"
      :row-class-name="getRowClass"
      :border="true"
      :stripe="true"
      @row-click="clickRow"
      class="table-wrap"
      ref="tableRef"
    >
      <el-table-column type="expand" align="center" width="80">
        <template slot-scope="{ row }">
          展开行childre: {{ row.children }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in header"
        :key="item.key"
        :label="item.value"
        :prop="item.key"
        :sortable="item.sortable ? item.sortable : false"
        align="center"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      openAll: true,
      header: [
        {
          key: "id",
          value: "ID"
        },
        {
          key: "title",
          value: "名称"
        },
        {
          key: "tag",
          value: "标签"
        },
        {
          key: "typeText",
          value: "方式"
        },
        {
          key: "cycle",
          value: "周期"
        },
        {
          key: "status",
          value: "状态"
        }
      ],
      tableData: [
        {
          id: 1,
          title: "test111122222",
          tag: "",
          typeText: "定时任务",
          cycle: "每天 9:00",
          status: "草稿",
          sortable: true,
          children: [
            {
              id: 11,
              title: "test1-1",
              tag: "",
              typeText: "定时任务",
              cycle: "每天 9:00",
              status: "草稿"
            }
          ]
        },
        {
          id: 2,
          title:
            "名称很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 12:00",
          status: "草稿",
          children: [
            {
              id: 21,
              title: "test1-1",
              tag: "",
              typeText: "定时任务",
              cycle: "每天 9:00",
              status: "草稿"
            }
          ]
        },
        {
          id: 3,
          title: "测试测试测试",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 00:00",
          status: "草稿",
          children: [
            {
              id: 31,
              title: "test1-1",
              tag: "",
              typeText: "定时任务",
              cycle: "每天 9:00",
              status: "草稿"
            },
            {
              id: 32,
              title: "test3-2",
              tag: "",
              typeText: "定时任务",
              cycle: "每天 9:00",
              status: "草稿"
            }
          ]
        },
        {
          id: 4,
          title: "嗯嗯嗯",
          tag: "hhh",
          typeText: "定时任务",
          cycle: "每天 10:00",
          status: "草稿",
          children: []
        },
        {
          id: 5,
          title: "test",
          tag: "null",
          typeText: "循环任务",
          cycle: "每天 19:00",
          status: "正式"
        }
      ]
    };
  },
  methods: {
    getRowClass({ row }) {
      if (!row.children || !Array.isArray(row.children) || !row.children.length) return "hide-expand";
    },
    clickRow(row, index, e) {
      if (row.children) {
        const $table = this.$refs.tableRef;
        this.tableData.map(item => {
          // 可以全部都展开
          if (this.openAll) {
            item.expanded = !item.expanded;
          } else {
            // 同一时间只能展开一个
            if (row.id != index.id) {
              $table.toggleRowExpansion(item, false);
              item.expanded = false;
            } else {
              item.expanded = !item.expanded;
            }
          }
        });
        $table.toggleRowExpansion(row);
      }
    }
  }
};
</script>

<style lang="less">
.table-wrap {
  .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table__expand-icon .el-icon-arrow-right:before {
    content: "\e6d9";
    border: 1px solid #ccc;
    padding: 1px;
  }
  .el-table__expand-icon--expanded .el-icon-arrow-right:before {
    content: "\e6d8";
  }
  // 没有展开行时,隐藏展开/折叠操作按钮
  .hide-expand {
    td:first-child .cell {
      visibility: hidden;
    }
  }
}
</style>

完整效果:

相关推荐
SoraLuna1 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
martian66512 小时前
QT开发:掌握现代UI动画技术:深入解析QML和Qt Quick中的动画效果
开发语言·c++·qt·ui
初九之潜龙勿用14 小时前
C#结合JS解决Word添加无效位图导致进程停滞的问题
javascript·ui·c#·word·asp.net
lfl1832616216014 小时前
el-date-picker 设置开始时间和结束时间
前端·vue.js·elementui
牛先森家的牛奶18 小时前
elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法
前端·javascript·elementui
AI原吾19 小时前
`psdparse`:解锁Photoshop PSD文件的Python密钥
python·ui·ai·photoshop·psdparse
赵锦川1 天前
nuiapp vue3 uni-ui uni.uploadFile 图片上传
javascript·vue.js·ui
dangoxiba1 天前
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十八集:制作UI系统的主菜单界面和选择存档界面
ui
如风暖阳1 天前
浅谈UI自动化
ui·面试·自动化
番茄灭世神1 天前
Qt学习笔记第41到50讲
qt·ui·上位机