技巧大公开！Element-UI Table组件的render属性及自定义单列表头样式解析

2023-09-04 11:32:37

Element-UI Table组件介绍

Element-UI Table组件是一个功能强大的表格组件，它提供了丰富的功能和自定义选项，可以轻松构建出满足不同需求的表格。Table组件的基本用法如下：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市黄浦区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

使用render属性定义表头

在有些情况下，我们需要动态生成表头，或者需要将表头定义成一个数组，通过遍历的方式去实现。此时，我们可以使用Table组件的render属性。render属性是一个函数，它接收一个参数h，这是一个createElement函数，我们可以用它来创建虚拟DOM元素。

<template>
  <el-table :data="tableData">
    <el-table-column :render="renderHeader">
      <template slot="header">自定义表头</template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市黄浦区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    renderHeader(h) {
      return h('div', null, ['自定义表头']);
    }
  }
}
</script>

在上面的例子中，我们将表头定义成了一个数组，然后通过遍历的方式去创建虚拟DOM元素。这样，我们就可以动态生成表头，或者将表头定义成一个数组，通过遍历的方式去实现。

自定义单列的表头样式

在有些情况下，我们需要自定义单列的表头样式。此时，我们可以使用slot-scope属性。slot-scope属性是一个函数，它接收一个参数scope，这个参数是一个对象，它包含了当前列的一些信息，如：列名、列值、列索引等。我们可以通过这个对象来修改当前列的表头样式。

<template>
  <el-table :data="tableData">
    <el-table-column :render="renderHeader">
      <template slot="header" slot-scope="scope">
        <span :style="{ color: scope.row.age > 25 ? 'red' : 'black' }">{{ scope.column.label }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市黄浦区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    renderHeader(h) {
      return h('div', null, ['自定义表头']);
    }
  }
}
</script>