定义el-table展开与折叠图标

一、隐藏原有的折叠图标，我们可以通过设置原有折叠图标的 CSS 样式为 display: none; 来隐藏它。

xml 复制代码

</script>
<style scoped>
...

/* 隐藏原有的折叠图标 */
/deep/ .el-table__expand-icon .el-icon svg {
  display: none;
}

</style>

二、由于 Element UI 中使用的是内联 SVG 图标,且图标样式被深度作用域样式影响,直接修改样式比较困难。不过,我们可以尝试通过替换图标元素的方式来实现您的需求。

以下是一个可行的解决方案:

在 <template> 标签中,找到渲染展开/收起按钮的代码块,通常是一个 <el-table-column> 元素。
在该 <el-table-column> 元素中添加一个作用域插槽 #default="scope"。
在作用域插槽中,使用一个 <span> 元素来替换原有的图标元素,并根据行数据的展开/收起状态动态渲染加号或减号。
对 <span> 元素应用样式,以获得所需的外观。

具体代码如下:

arduino 复制代码

<el-table-column prop="stage_name" label="阶段名 / 步骤名" width="250" header-align="center">
  <template #default="scope">
    <span v-if="hasChildren(scope.row)" class="expand-icon" @click="toggleRowExpand(scope.row)">
      {{ scope.row.isExpanded ? '-' : '+' }}
    </span>
    {{ scope.row.stage_name }}
  </template>
</el-table-column>

在 <script> 部分添加一个方法来切换行的展开/收起状态:

javascript 复制代码

methods: {
  ...
  toggleRowExpand(row) {
    row.isExpanded = !row.isExpanded;
  },
  hasChildren(row) {
    // 根据您的数据结构判断当前行是否有子级数据
    // 这里假设子级数据存储在 'child' 字段中
    return row.child && row.child.length > 0;
  }
}

并在 <style> 部分添加样式:

css 复制代码

.expand-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 4px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

这样，您就可以在表格中看到加号和减号作为展开/收起按钮的图标了。

三、效果图

分级背景色调整

1、在 el-table 组件上绑定了 row-class-name 属性,并将其值设置为一个方法 tableRowClassName。

ruby 复制代码

<el-table ref="table" :data="tableData" :tree-props="{ children: 'child', hasChildren: 'hasChildren' }" row-key="id"
          :row-class-name="tableRowClassName"
          :header-cell-style="{backgroundColor: '#d9d9d9', fontSize: '14px', padding: '10px', color: 'black', fontWeight: 'normal'}" border style="width: 100%">

在 <script> 部分添加tableRowClassNam方法来区分第一级与第二级:

javascript 复制代码

methods: {
    ...
    tableRowClassName({row}) {
      if (row.child) {
        return 'first-level-row'
      } else {
        return 'second-level-row'
      }
    },
}

并在 <style> 部分添加样式:

css 复制代码

/deep/ .first-level-row {
  background-color: #ffffff /* 第一级行的背景色 */
}

/deep/ .second-level-row {
  background-color: #e8e8e8 /* 第二级行的背景色 */
}

Vue3.x 自定义el-table展开与折叠图标及分级背景色调整

定义el-table展开与折叠图标

分级背景色调整