antdv-etable

antdv-etable 是一个可以用 element table 风格实现 antdv table 的 vue 组件。

具体实现可以参考知乎文章 不到十行代码改变 antdv 表格使用风格

准备

antdv-etable 仅支持 typescript 且依赖于 Ant Design Vue。

安装

npm i antdv-etable

引入

// main.ts
import App from './App.vue'
import { createApp } from 'vue'
import Antd from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

import ETable from 'antdv-etable'

createApp(App)
  .use(Antd)
  .use(ETable)
  .mount('#app')

使用

<template>
  <ETable :data="data">
    <ETableItem title="姓名" dataIndex="name" />
    <ETableItem title="性别" dataIndex="gender">
      <template #default="{ record: { gender }}">{{
        Number(gender) ? '男' : '女'
      }}</template>
    </ETableItem>
    <ETableItem title="年龄" dataIndex="age" />
    <ETableItem title="城市" dataIndex="city" />
    <ETableItem :slots="{ title: 'title' }">
      <template #title>
        <span>操作</span>
      </template>
      <template #default="{ record }">
        <a-button @click="edit(record)">编辑</a-button>
      </template>
    </ETableItem>
  </ETable>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup () {
    return {
      data: [
        { id: 1, name: '张三', gender: 1, age: 18, city: 'Beijing' },
        { id: 2, name: '李四', gender: 0, age: 22, city: 'Shanghai' },
        { id: 3, name: '王五', gender: 1, age: 24, city: 'Guangzhou' }
      ]
    }
  }
})
</script>

注意

ETable 支持 a-table 所有属性。 ETableColumn 支持 a-table columns 配置项所有属性。 ETable 内置了自动生成 rowKey 功能，但是只有在将 a-table的 dataSource 属性改为 data 才会生效。

示例

<!-- 自定义 column title -->
<template>
  <ETable :data="data">
    <ETableColumn title="姓名" dataIndex="name" />
    <ETableColumn title="性别" dataIndex="gender">
      <template #default="{ record: { gender }}">{{
        Number(gender) ? '男' : '女'
      }}</template>
    </ETableColumn>
    <ETableColumn title="年龄" dataIndex="age" />
    <ETableColumn title="城市" dataIndex="city" />
    <ETableColumn :slots="{ title: 'title' }">
      <template #title>
        <span>操作</span>
      </template>
      <template #default="{ record }">
        <a-button @click="edit(record)">编辑</a-button>
      </template>
    </ETableColumn>
  </ETable>
</template>

<script lang="ts">
import list from './list'
import { defineComponent } from 'vue'
export default defineComponent({
  setup () {
    return {
      data: list
    }
  }
})
</script>