Table

基于elementui plus的table二次封装，通过配置config的形式简化书写表格代码时的重复度。对于table和table column的属性在透传上进行了增强，进一步加强了表格的功能性。

WARNING

当表格里每一条数据都包含很多子组件的时候，不可避免的会创建相当多的组件实例，这样会导致表格内容的首次渲染时间变长，目前没有什么好的解决方案。

可以考虑通过异步渲染defineAsyncComponent来让表格优先被数据填充，再去加载子组件。虽然总体上的时间没有任何提升，甚至由于异步的原因，会有网络连接的损耗，但是至少能显著提高首屏的渲染时间。

Basic table

Basic table is just for data display.

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'BasicTable',
})
</script>

<script lang="ts" setup>
const tableConfig = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '身高', prop: 'height', unit: 'm' },
  { label: '体重', prop: 'weight', unit: 'kg' },
]
const tableData = ref([
  { name: '维内托', age: 18, height: 237.8, weight: 40517, id: 1 },
  { name: '安德烈亚•多利亚', age: 18, height: 186.9, weight: 28700, id: 2 },
])
</script>

Hide Source

单选

可以通过getCheckboxProps来单独设置某一行是否允许选中

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    row-key="id"
    :row-selection="{
      type: 'radio',
      selectedRowKeys,
      onChange: onSelectChange,
      getCheckboxProps: (row) => ({
        disabled: row.id === 2,
      }),
    }"
  />
</template>

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

const selectedRowKeys = ref<string>('')
const tableConfig = ref([
  { type: 'select', width: 50 },
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '地址', prop: 'address' },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
    id: 1,
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
    id: 2,
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
    id: 3,
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
    id: 4,
  },
])

function onSelectChange(key: string) {
  console.log(key)
  selectedRowKeys.value = key
}
</script>

Hide Source

多选

由于element的table多选功能的手动选择依赖表格数据的引用，在回显的时候很难处理，因此参考了antdv的做法，增强了多选功能，可以通过{ type: 'checkbox' }开启.

可以通过getCheckboxProps来单独设置某一行是否允许选中

<template>
  <bc-button
    style="margin-bottom: 10px;"
    @click="handleSelect"
  >
    选择第二行
  </bc-button>
  <bc-table
    ref="tableRef"
    :config="tableConfig"
    :data="tableData"
    row-key="id"
    :row-selection="{
      selectedRowKeys,
      onChange: onSelectChange,
      getCheckboxProps: (row) => ({
        disabled: row.id === 2,
      }),
    }"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const selectedRowKeys = ref<number[]>([1])
const tableRef = ref()
const tableConfig = [
  { type: 'select' },
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '身高', prop: 'height', unit: 'm' },
  { label: '体重', prop: 'weight', unit: 'kg' },
]
const tableData = ref([
  { name: '维内托', age: 18, height: 237.8, weight: 40517, id: 1 },
  { name: '安德烈亚•多利亚', age: 18, height: 186.9, weight: 28700, id: 2 },
])
function onSelectChange(keys: number[]) {
  selectedRowKeys.value = keys
}
function handleSelect() {
  selectedRowKeys.value = [2]
}
</script>

Hide Source

自定义单元格

可以通过插槽的形式，自定义单元格里的内容

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
  >
    <template #name="{row}">
      <span>{{row.name}}</span>
    </template>
    <template #operate="{row}">
      <bc-button text type="primary" @click="handleEdit(row)">编辑</bc-button>
      <bc-button text type="primary" @click="handleRemove(row)">删除</bc-button>
    </template>
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'CustomCell',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '操作', prop: 'operate' }
]);
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
function handleEdit(row) {
  console.log('edit', row);
}
function handleRemove(row) {
  console.log('remove', row)
}
</script>

Hide Source

自定义表头

可以通过设置header: true开启自定义表头，插槽名为对应{prop}-header

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
  >
    <template #country-header="{column}">
      <div style="display: flex; align-items: center;">
        <el-icon :size="20" style="margin-right: 10px">
          <svg t="1636083394948" class="icon" viewBox="0 0 1546 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4761" width="200" height="200"><path d="M11.321867 1017.710074h1520.904177V6.289926H11.321867v1011.420148z m1524.678133 3.773955v-3.773955 3.773955zM5.031941 1024V0h1533.48403v1024H5.031941z" fill="#353636" p-id="4762"></path><path d="M8.805897 2.515971h1527.194103V1020.226044H8.805897z" fill="#D64B24" p-id="4763"></path><path d="M264.176904 118.250614l32.707617 99.380836h104.412776L317.012285 278.014742l31.449631 99.380835L264.176904 315.7543l-84.285012 61.641277 32.707617-99.380835-84.285013-60.383292h104.412777zM535.90172 65.415233l-1.257985 35.223588 31.449631 12.579852-33.965602 8.805897-1.257985 33.965602-18.869779-28.933661-32.707617 7.547912 21.38575-26.417691-17.611794-28.933661 31.449632 13.837838zM652.894349 177.375921l-15.095823 30.191647 23.90172 23.901719-33.965602-5.031941-15.095823 30.191647-5.031941-33.965602-33.965602-5.031941L603.832924 202.535627l-5.031941-33.965602 23.90172 23.901719zM617.670762 315.7543l11.321867 32.707616h33.965602l-27.675676 20.127765 10.063882 32.707616-27.675675-20.127764-27.675676 20.127764 11.321867-32.707616-27.675675-20.127765h33.965602zM535.90172 421.425061l-2.515971 33.965602 32.707617 12.579853-33.965602 8.805897-2.51597 33.965602-17.611794-28.933661-33.965602 8.805897 22.643735-26.417691-18.869779-28.933661 32.707617 12.579853z" fill="#FBDC00" p-id="4764"></path></svg>
        </el-icon>
        <span>{{column.label}}</span>
      </div>  
    </template>
    <template #name="{row}">
      <span>{{row.name}}</span>
    </template>
    <template #operate="{row}">
      <bc-button type="primary" text @click="handleEdit(row)">编辑</bc-button>
      <bc-button type="primary" text @click="handleRemove(row)">删除</bc-button>
    </template>
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'CustomHeader',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country', header: true },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '操作', prop: 'operate' }
]);
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
function handleEdit(row) {
  console.log('edit', row);
}
function handleRemove(row) {
  console.log('remove', row)
}
</script>

Hide Source

行内省略

主要是添加了一个统一的开关，避免重复设置同一个属性。

可以通过show-overflow-tooltip统一开启所有列的行内省略，同时也兼容原生的属性，支持针对单列的独立配置

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    show-overflow-tooltip
  >
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'OverflowTooltip',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name', showOverflowTooltip: false },
  { label: '原名', prop: 'originName' },
  { label: '地址', prop: 'address' },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
</script>

Hide Source

多级表头

列配置中加上children，可以用来管理多级表头

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
  >
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'MultipleHeader',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date', width: 100 },
  { label: '舰种', prop: 'catalog' },
  { label: '个人信息', prop: 'info', children: [
    { label: '姓名', prop: 'name', width: 150 },
    { label: '原名', prop: 'originName', editable: true, width: 200 },
    { label: '地址', prop: 'address', width: 150 },
    { label: '身高', prop: 'height' },
    { label: '体重', prop: 'weight' },
  ] }
]);
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
</script>

Hide Source

行内编辑

通过editable可以对指定列开启行内编辑

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    @save="handleSave"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableInstance } from '@basic-comp/components'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date', width: 100 },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name', width: 150 },
  { label: '原名', prop: 'originName', editable: true, width: 200 },
  { label: '地址', prop: 'address', width: 150 },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
])

const handleSave: TableInstance['onSave'] = (cell: string, prop: string, record: Record<string, any>) => {
  console.log('cell', cell)
  console.log('prop', prop)
  console.log('record', record)
}
</script>

Hide Source

单选框 (废弃)

WARNING

该用法将被废弃，请使用row-selection进行设置

与type: selection类似，可以通过type: radio添加一列单选框。

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    row-key="id"
    :row-selection="{
      type: 'radio',
      selectedRowKeys,
      onChange: onSelectChange,
      getCheckboxProps: (row) => ({
        disabled: row.id === 2,
      }),
    }"
  />
</template>

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

const selectedRowKeys = ref<string>('')
const tableConfig = ref([
  { type: 'select', width: 50 },
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '地址', prop: 'address' },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
    id: 1,
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
    id: 2,
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
    id: 3,
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
    id: 4,
  },
])

function onSelectChange(key: string) {
  console.log(key)
  selectedRowKeys.value = key
}
</script>

Hide Source

行合并

element-plus的实现太底层了，所以使用起来有点麻烦。通过colspanOptions可以更直观的配置哪些列需要被合并。

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    :colspanOptions="{
      includes: ['country', 'catalog'],
      parentProp: 'country',
    }"
  >
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'RowMerge',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '地址', prop: 'address' },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
</script>

Hide Source

远程数据

table将远程数据的请求进行了封装，对诸如page,pagesize,total这些分页参数，在组件内部就进行了托管，不需要开发人员再自行维护。

WARNING

因为分页的相关数据和行为交给了组件，所以只有请求这个行为必须要交给table去触发。因此在获取数据的时候不是用户操作按钮去请求数据，而是用户操作按钮通知table去请求数据。

暂无数据

共 0 条

• 1

前往

页

<template>
  <div style="margin-bottom: 10px">
    <bc-button type="primary" @click="handleSearch">搜索</bc-button>
  </div>
  <bc-table
    ref="tableRef"
    :config="tableConfig"
    :api="getList"
    row-key="name"
    array-name="data"
    pagination
    :page-sizes="[100]"
  >
  </bc-table>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Remote',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
const tableConfig = ref([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date' },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name' },
  { label: '原名', prop: 'originName' },
  { label: '地址', prop: 'address' },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = ref([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
    height: '237.8',
    weight: '40517',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
    height: '186.9',
    weight: '28700',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
    height: '107.3',
    weight: '1900',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
    height: '269.4',
    weight: '59150',
  },
]);
const tableRef = ref();
function handleSearch() {
  tableRef.value.getList();
}
function getList() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        data: {
          data: tableData.value,
        }
      })
    }, 1000)
  })
}
</script>

Hide Source

空白单元格

可以通过table的emptyText来设置表格对于空白单元格的处理方式 支持function和string

TIP

在渲染的时候组件内部会对单元格做空值判断，因此在通过function动态设置空白单元格的时候可以直接通过判断是否为空字符串来判断是否为空白单元格

<template>
  <bc-table
    :config="tableConfig"
    :data="tableData"
    empty-text="N/A"
  />
  <bc-table
    style="margin-top: 20px;"
    :config="tableConfig"
    :data="tableData"
    :empty-text="renderEmptyCell"
  />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
const tableConfig = shallowRef([
  { label: '国籍', prop: 'country' },
  { label: '生日', prop: 'date', width: 100 },
  { label: '舰种', prop: 'catalog' },
  { label: '姓名', prop: 'name', width: 150 },
  { label: '原名', prop: 'originName', width: 200 },
  { label: '地址', prop: 'address', width: 150 },
  { label: '身高', prop: 'height' },
  { label: '体重', prop: 'weight' },
])
const tableData = shallowRef([
  {
    country: '意大利',
    catalog: '战列舰',
    name: '维内托',
    originName: 'Vittorio Veneto',
    date: '1937-07-25',
    address: '里亚斯特造船厂',
  },
  {
    country: '意大利',
    name: '安德烈亚•多利亚',
    catalog: '战列舰',
    originName: 'Andrea Doria',
    date: '1913-03-30',
    address: '拉斯佩齐亚船厂',
  },
  {
    country: '意大利',
    catalog: '驱逐舰',
    name: '乌戈里尼·维瓦尔迪',
    originName: 'Ugolino Vivaldi',
    date: '1929-01-09',
    address: '西赛斯特里造船厂',
  },
  {
    country: '苏联',
    catalog: '战列舰',
    name: '苏联',
    originName: 'Советский Союз',
    date: '2017-02-01',
    address: '波罗的海造船厂',
  },
]);
function renderEmptyCell(val: string | number, column: Record<string, string | number>) {
  if (column.property === 'weight') {
    return val === '' ? 'N/A' : val
  } else {
    return val === '' ? '--' : val
  }
}
</script>

Hide Source

拖曳排序

可以将useSortable整合进表格中来实现拖曳排序

WARNING

必须设置row-key，否则会导致表格数据与表现不符

<template>
  <bc-table
    id="drag-table"
    row-key="id"
    :config="tableConfig"
    :data="tableData"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useSortable } from '@vueuse/integrations/useSortable'

const tableConfig = [
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '身高', prop: 'height', unit: 'm' },
  { label: '体重', prop: 'weight', unit: 'kg' },
]
const tableData = ref([
  { name: '维内托', age: 18, height: 237.8, weight: 40517, id: 1 },
  { name: '安德烈亚•多利亚', age: 18, height: 186.9, weight: 28700, id: 2 },
])

useSortable('#drag-table tbody', tableData, {
  animation: 150,
})
</script>

<style scoped>
#drag-table:deep(tbody > tr) {
  cursor: move;
}
#drag-table:deep(.sortable-ghost) {
  opacity: 0.4;
}
</style>

Hide Source

指定拖曳区域

当表格的数据行存在需要用户操作的内容，比如点击或者复制时，可以通过handler手动指定允许拖曳的区域。

WARNING

必须设置row-key，否则会导致表格数据与表现不符

<template>
  <bc-table
    id="drag-table-with-handle"
    row-key="id"
    :config="tableConfig"
    :data="tableData"
  >
    <template #handle>
      <el-icon class="drag-handle"><IconRank /></el-icon>
    </template>
  </bc-table>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useSortable } from '@vueuse/integrations/useSortable'
import { Rank as IconRank } from '@element-plus/icons-vue'

const tableConfig = [
  { width: 40, prop: 'handle' },
  { label: '姓名', prop: 'name' },
  { label: '年龄', prop: 'age' },
  { label: '身高', prop: 'height', unit: 'm' },
  { label: '体重', prop: 'weight', unit: 'kg' },
]
const tableData = ref([
  { name: '维内托', age: 18, height: 237.8, weight: 40517, id: 1 },
  { name: '安德烈亚•多利亚', age: 18, height: 186.9, weight: 28700, id: 2 },
])

useSortable('#drag-table-with-handle tbody', tableData, {
  handle: '.drag-handle',
  animation: 150,
})
</script>

<style scoped>
#drag-table-with-handle:deep(.drag-handle) {
  cursor: move;
}
#drag-table-with-handle:deep(.sortable-ghost) {
  opacity: 0.4;
}
</style>

Hide Source

Table 属性

属性	说明	类型	可选值	默认值
config	表格列配置	object	-	[]
data	表格数据源	array	-	[]
api	远程数据获取的回调函数	function(): promise	-	-
arrayName	远程获取表格数据的字段名，可通过 config-provider 全局设置	string	-	-
pagination	是否使用分页组件	boolean	-	false
modelValue/v-model	分页参数，支持双向绑定	object	-	{ page: 1, rows: 20 }
total	本地数据源使用分页功能需要手动维护 total	number	-	0
colspanOptions	行合并相关配置	object	-	-
padding	表格的内边距	boolean	-	true
custom	是否自定义表格数据	boolean	-	false
filter	表格数据过滤器	function(data)	-	-
immediate	是否在 created 时自动获取数据，仅在数据源为远程数据时有效	boolean	-	true
fixXScroll	固定列过多在产生底部滚动条在浏览器视窗的底部（Beta）	boolean	-	false
simple	简易表格，支持本地分页	boolean	-	false
load	是否在获取远程数据里显示 loading 动画	boolean	-	true
emptyText	设置空白单元格的填充内容	function(val, column)/string	-	''
rowSelection	列表项是否可选择，配置项见Row-selection	object	null

Table 插槽

名称	说明
[prop]	自定义对应列的内容，参数为{ row, column, $index }
[prop]-header	自定义对应列表头的内容，参数为{ column, $index }

Table 事件

事件名	说明	参数
save	当行内编辑输入框用户回车时触发	value
blur	当行内编辑输入框失焦时触发	value

TIP

之所以针对行内编辑要区分save和blur事件，是因为回车是用户主观上希望保存的行为，但是失焦在不同业务场景下有不同的需求，所以独立开来了。

Table-column 属性

TIP

可以通过config去设置每一列的属性

属性	说明	类型	可选值	默认值
type	列的特殊功能	string	expand / selection / radio	-
label	每一列表头显示的名称	string	-	-
prop	每一列对应的数据字段，同时也是自定义时的插槽名	string	-	-
header	是否需要自定义列表头，只有在开启时[prop]-header插槽才会生效	boolean	-	false
editable	是否开启行内编辑	boolean	-	false
filter	列数据过滤器	function / object	-	-
unit	列数据的单位，会自动添加在数据后	string	-	-

Row-selection 属性

多选功能的配置

WARNING

必须设置row-key

参数	说明	类型	可选值	默认值
type	选择框的类型	'checkbox' | 'radio'	'checkbox'
selectedRowKeys	指定选中项的 key 数组，需要和 onChange 进行配合	string[]	[]
onChange	选中项发生变化时的回调	Function(selectedRowKeys)	-
preserveRowKeys	本地数据删除时是否保留选项的key（主要用于跨页选择保留选中结果）	boolean	-	false
getCheckboxProps	选择框的默认属性配置	function(row)	-	-

Source

Docs