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>