# 重新设计表格列的配置

思路参考自 Yii GridView (opens new window)

# 背景

相信你肯定遇到过这样的需求

  • 时间需要格式化展示，有的精确到天，有的精确到秒。
  • 数字要有千分位分隔符，或者保留几位小数。

针对这些常见需求，为了简化写法，特地将列的配置进行了一次封装，省得每次去写customRender。

# 配置项

在原有表格列的配置 (opens new window)基础上继续扩展配置

参数 说明 类型 默认值
type 指定列的类型，目前内置了 serial,date,number,tag,action。也可以自己在项目中扩展 String 'string'

# 新的写法

序号
用户名
创建时间
更新时间
微信余额
标签
操作
1张三2021-12-18 22:24:282021-12-1812,345.00
nicedeveloper
2李四2021-12-18 22:24:282021-12-181.03
loser
<script>
import { notification } from 'ant-design-vue'
export default {
  data () {
    return {
      columns: [
        '#',
        { dataIndex: 'name', title: '用户名' },
        { type: 'date', dataIndex: 'created_at', title: '创建时间' },
        { type: 'date', dataIndex: 'updated_at', title: '更新时间', format: 'YYYY-MM-DD' },
        { type: 'number', dataIndex: 'balance', title: '微信余额' },
        {
          type: 'tag',
          dataIndex: 'tags',
          title: '标签',
          color: tag => tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
        },
        {
          type: 'action', buttons: [
            {
              text: '编辑',
              click (row) {
                notification.info({ message: row.name })
              }
            },
            {
              text: '删除',
              visible: row => row.balance < 100,
              confirm: '确定要删除吗？',
              click (row) {
                notification.info({ message: `删除${row.name}成功！` })
              }
            },
          ]
        }
      ],
      source: [
        {
          name: '张三',
          created_at: Date.now(),
          updated_at: Date.now(),
          balance: 12345,
          tags: ['nice', 'developer'],
        },
        {
          name: '李四',
          created_at: Date.now(),
          updated_at: Date.now(),
          balance: 1.03,
          tags: ['loser'],
        },
      ]
    }
  },
  render () {
    return <erp-table
      rowKey="name"
      dataSource={this.source}
      columns={this.columns}
    />
  }
}
</script>

# 扩展自定义列类型

当你发现，项目中有好几个地方，同样的列写了相同的customRender，这时候你就得考虑一下自己扩展一个列类型了。

import { Column } from 'erpack';
class MyColumn extends Column {}

← StringColumn 文本列 →