Table 表格

快速的数据化配置一个带有分页排序的表格布局表单。

基础使用

当分页和排序发生变化，会同步参数到 page 对象，同时触发 request 请求。

要显示分页至少需要配置 currentPage pageSize total | pageCount 三个属性。

表格的 default-sort 属性的 {prop, order} 被 page 属性的 {sortProp, sortOrder} 代替。

点击查看代码

<template>
  <div class="demo">
    <AgelTable ref="tableRef" v-bind="table" v-model:page="table.page"> </AgelTable>
  </div>
</template>

<script lang="tsx" setup>
import { reactive, onMounted, ref } from 'vue'
import { ElMessage, } from 'element-plus'
import http from "./utils/http"

type Row = { name: string, date: string, address: string }

const tableRef = ref()
const table = reactive({
  loading: false,
  data: [] as Row[],
  height: '300px',
  columns: [
    { label: '#', type: 'selection', width: 50, align: 'center' },
    {
      label: '个人',
      children: [
        { label: '名称', prop: "name", sortable: 'custom' },
        { label: '日期', prop: 'date', sortable: 'custom' },
        { label: '地址', prop: 'address', width: 300, },
      ]
    },
  ],
  page: { currentPage: 1, pageSize: 10, total: 0, sortProp: 'name', sortOrder: 'ascending', },
  request: () => {
    const query = {
      page: table.page.currentPage,
      size: table.page.pageSize,
      sortProp: table.page.sortProp,
      sortOrder: table.page.sortOrder
    }
    table.data.length > 0 && ElMessage.success('参数:' + JSON.stringify(query))
    table.loading = true
    http('/mock/table', query).then((res: any) => {
      table.data = res.data.list
      table.page.total = res.data.total
      table.loading = false
    })
  },
  onSelectionChange: () => {
    console.log(tableRef.value.getRef())
    // const names = tableRef.value?.getRef().getSelectionRows().map((v: Row) => v.name).join()
    // names.length > 0 && ElMessage.success('选中：' + names)
  }
})

onMounted(() => {
  table.request()
})
</script>

插槽使用

属性 label slot 可以为一个渲染函数，使用 jsx 大幅提高体验。

开启模板插槽，slot 属性必须 slot- 开头。

点击查看代码

<template>
  <div class="demo">
    <AgelTable :data="data" :columns="columns">

      <template #prepend>
        <ElTableColumn label="#" type="index"></ElTableColumn>
      </template>

      <template #slot-date="{ row }">
        <ElTag>{{ row.date }}</ElTag>
      </template>

    </AgelTable>
  </div>

</template>

<script lang="tsx" setup>

const columns = [
  {
    label: () => <el-tag>名称</el-tag>,
    slot: ({ row }: any) => <el-tag>{row.name}</el-tag>,
  },
  { label: '日期', slot: 'slot-date' },
]

const data = Array.from({ length: 6 }).map(v => {
  return {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
})

</script>

自动合并

设置 merge.keys 选择要自动合并列的 prop。

设置 merge.direction 选择合并方向，也可设置 auto 自动合并。

点击查看代码

<template>
  <div class="demo">
    <AgelRadio v-model="direction" :options="options"></AgelRadio>
    <AgelTable border :data="data" :columns="columns" :merge="(merge as any)">
    </AgelTable>
  </div>
</template>

<script lang="tsx" setup>
import { ref, computed } from 'vue'

const direction = ref('vertical')
const options = [
  { label: '竖向合并', value: 'vertical', },
  { label: '横向合并', value: 'horizontal', },
  { label: '自动合并', value: 'auto', },
]
const merge = computed(() => {
  return { keys: ['name', 'date', 'address'], direction: direction.value }
})

const columns = [
  { label: '名称', prop: 'name' },
  { label: '日期', prop: 'date' },
  { label: '地址', prop: 'address' },
]

const data = [
  { date: "Apple", name: "Apple", address: "Apple" },
  { date: '2016-05-03', name: 'Xiaomi', address: 'Samsung', },
  { date: '2016-05-02', name: 'Xiaomi', address: 'Samsung' },
  { date: '2016-05-04', name: 'Xiaomi', address: 'Samsung' },
  { date: '2016-05-01', name: 'Xiaomi', address: 'Samsung' },
]

</script>

属性

属性	类型	默认值	说明
loading	boolean	-	是否加载中
columns	ColumnProps[]	-	表格配置项
page	PageProps	-	分页排序参数
merge		MergeProps	自动合并单元格
......	-	-	ElTable 属性

ColumnProps

属性	类型	默认值	说明
label	string | RenderFunction	-	列标题
slot	string | RenderFunction	-	列插槽
hidden	boolean	-	列是否不可见
children	ColumnProps[]	-	多级表头
......	-	-	ElTableColumn 属性

PageProps

属性	类型	默认值	说明
sortProp	string	-	排序列 prop
sortOrder	'ascending'|'descending'|null	-	排序列方式
...	-	-	ElPagination 属性

MergeProps

属性	类型	默认值	说明
keys	string[]	-	合并列的prop集合
direction	'vertical' | 'horizontal'| 'auto'	'auto'	合并方向

方法

名称	参数	说明
getRef	-	获取 elTable 组件实例

插槽

名称	插槽作用域	说明
slot-xx	{row,$index,column}	列具名插槽
prepend	-	columns 前置插槽
append	-	columns 后置插槽
empty	-	ELTable empty 插槽
append-row	-	ELTable append 插槽