i-table自定义列

i-table 是 iView UI 组件库中的一个表格组件，它允许我们自定义表格的列。要自定义 i-table 的列，我们可以使用 i-table 组件的 scoped slot `header` 和 `default`。

`header` slot 用于定义表头，我们可以在其中使用 `render-header` 函数来自定义表头的内容和样式。在 `header` slot 中，我们可以访问到表头的数据对象 `column`，我们可以在其中设置表头的样式、排序方式、列宽等属性。

`default` slot 用于定义表格的每一行数据，我们可以在其中使用 `render-cell` 函数来自定义每一行数据的内容和样式。在 `default` slot 中，我们可以访问到当前行的数据对象 `row`，以及当前单元格的数据对象 `column`。

下面是示例代码：

<template>
  <i-table :columns="columns" :data="tableData">
    <template slot="header" slot-scope="{ column }">
      <span v-if="column.key === 'name'">姓名</span>
      <span v-else-if="column.key === 'age'">年龄</span>
      <span v-else-if="column.key === 'gender'">性别</span>
    </template>
    <template slot-scope="{ row, column }">
      <span v-if="column.key === 'name'">{{ row.name }}</span>
      <span v-else-if="column.key === 'age'">{{ row.age }}</span>
      <span v-else-if="column.key === 'gender'">{{ row.gender }}</span>
    </template>
  </i-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'name', title: '姓名' },
        { key: 'age', title: '年龄' },
        { key: 'gender', title: '性别' }
      ],
      tableData: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  }
}
</script>

在上面的代码中，我们使用了 `slot-scope` 来获取 `column` 和 `row` 对象，从而实现了自定义表头和表格数据。