前文

今天我们来一起学习ElementUi组件库中的Table表格的子列背景颜色更改技巧

一、实现效果

如图所示：这是一个table表格，其中主列颜色为默认，子列背景颜色为手动设置颜色

代码：

<div class="police-list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="xxx" sortable width="120" />
        <el-table-column prop="cfjqfl" label="xxx" width="80">
          <template slot-scope="scope">
            <el-tag type="primary" disable-transitions>{{ scope.row.xxx }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="xxx" label="xxx" />
        ......
        <el-table-column prop="xxx" label="xxx" />
        <el-table-column label="操作">
          <template>
            <el-button
              size="mini"
              type="primary"
              @click="dialogFormVisible = true"
            >反馈</el-button>
          </template>
        </el-table-column>
      </el-table>

数据结构：

const tableData = 
{
    id: 1,
    date: '2016-05-02',
    cfjqfl: '同电话',
    ......
    bjr: '张三',
    sfzh: 'xxxxxxxxxxxxx',
    bjdh: 'xxxxxxxxxxxxx',
    sfdz: 'XX地址',
    children: [
      {
        id: 11,
        date: '2016-05-02',
        ......
        bjr: '张三',
        sfzh: 'xxxxxxxxxxxxx',
        bjdh: 'xxxxxxxxxxxxx',
        sfdz: 'XX地址'
      },
      {
        id: 12,
        date: '2016-05-02',
        ......
        bjr: '张三',
        sfzh: 'xxxxxxxxxxxxx',
        bjdh: 'xxxxxxxxxxxxx',
        sfdz: 'XX地址'
      }
    ]
  },

二、实现方式

首先让我们来到组件库表格部分

先给大家解释一下:tree-props="{ children: 'children' }"是什么意思？

指的是在:data="tableData"上传的数据tableData是否存在一个名为children的键，如果存在则渲染子节点

好，接下来，现在我们需要借助这个函数达成我们更换子列背景颜色的目的：

详见代码：

<div class="police-list">
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children' }"
        :row-style="rowStyle"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="xxx" sortable width="120" />
        <el-table-column prop="cfjqfl" label="xxx" width="80">
          <template slot-scope="scope">
            <el-tag type="primary" disable-transitions>{{ scope.row.xxx }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="xxx" label="xxx" />
        ......
        <el-table-column prop="xxx" label="xxx" />
        <el-table-column label="操作">
          <template>
            <el-button
              size="mini"
              type="primary"
              @click="dialogFormVisible = true"
            >反馈</el-button>
          </template>
        </el-table-column>
      </el-table>

Js部分：

methods: {
    rowStyle({ row, rowIndex }) {
      // 检查特定条件，例如是否有子表格，然后设置背景色
      if (!row.children) {
      // 注意这里一定要用{}，也就是对象的形式返回颜色
        return { 'background-color': '#CCCCFF' }
      }
      return '' // 如果不满足条件，返回空字符串
    }
  }

解释一下逻辑，row-style每次回调一个函数，将

const tableData = 
{
    id: 1,
    date: '2016-05-02',
    cfjqfl: '同电话',
    ......
    bjr: '张三',
    sfzh: 'xxxxxxxxxxxxx',
    bjdh: 'xxxxxxxxxxxxx',
    sfdz: 'XX地址',
    children: [
      {
        id: 11,
        date: '2016-05-02',
        ......
        bjr: '张三',
        sfzh: 'xxxxxxxxxxxxx',
        bjdh: 'xxxxxxxxxxxxx',
        sfdz: 'XX地址'
      },
      {
        id: 12,
        date: '2016-05-02',
        ......
        bjr: '张三',
        sfzh: 'xxxxxxxxxxxxx',
        bjdh: 'xxxxxxxxxxxxx',
        sfdz: 'XX地址'
      }
    ]
  },

拆分为三段数据返回，其中带有children的说明是主列，反之不是，因此我们的逻辑就出来了

rowIndex是每次数据渲染的索引号，此次不涉及