Cxz UI

Appearance

On this page

Table 表格 ​

简介 ​

配置化的 ElTable

基础用法 ​

使用配置代替了模版声明 ElTableColumn ， ElTable原本的属性、事件与方法均支持

<template>
  <CxzTable :columns="columns" :data="tableData" />
</template>

<script setup lang="ts">
import { CxzTable } from 'cxz-ui'
import { ref } from 'vue'

import type { CxzTableColumn } from 'cxz-ui'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const columns = ref<CxzTableColumn[]>([
  {
    prop: 'date',
    label: 'Date'
  },
  {
    prop: 'name',
    label: 'Name'
  },
  {
    prop: 'address',
    label: 'Address'
  }
])
</script>

渲染函数 ​

头部渲染可以使用ElTableColumn原本的 renderHeader, 内容渲染使用 render

NaN

<template>
  <CxzTable :columns="columns" :data="tableData" />
</template>

<script setup lang="ts">
import { CxzTable } from 'cxz-ui'
import { ref, h } from 'vue'
import { ElTag } from 'element-plus'

import type { CxzTableColumn } from 'cxz-ui'

interface Data {
  date: string
  name: string
  address: string
}

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const columns = ref<CxzTableColumn<Data>[]>([
  {
    prop: 'date',
    label: 'Date',
    render: ({ row, column, $index }) => {
      return row.date + column.label + $index
    },
    renderHeader: ({ column, $index }) => {
      return h('div', { style: 'color:red;' }, column.label)
    }
  },
  {
    prop: 'name',
    label: 'Name',
    render: ({ row }) => {
      return h(ElTag, null, { default: () => row.name })
    }
  },
  {
    prop: 'address',
    label: 'Address'
  }
])
</script>

插槽 ​

头部插槽 headerSlot, 内容插槽 slot

-1

<template>
  <CxzTable :columns="columns" :data="tableData">
    <template #date="{ row, column, $index }">
      <div>{{ row.date }}</div>
      <div>{{ column.label }}</div>
      <div>{{ $index }}</div>
    </template>

    <template #header_date="{ column, $index }">
      {{ column.label }}
      {{ $index }}
    </template>
  </CxzTable>
</template>

<script setup lang="ts">
import { CxzTable } from 'cxz-ui'
import { ref } from 'vue'

import type { CxzTableColumn } from 'cxz-ui'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const columns = ref<CxzTableColumn[]>([
  {
    prop: 'date',
    label: 'Date',
    slot: 'date',
    headerSlot: 'header_date'
  },
  {
    prop: 'name',
    label: 'Name'
  },
  {
    prop: 'address',
    label: 'Address'
  }
])
</script>

多级表头 ​

使用 children 实现

<template>
  <CxzTable :columns="columns" :data="tableData" />
</template>

<script setup lang="ts">
import { CxzTable } from 'cxz-ui'
import { ref } from 'vue'

import type { CxzTableColumn } from 'cxz-ui'

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const columns = ref<CxzTableColumn[]>([
  {
    prop: 'date',
    label: 'Date'
  },
  {
    label: '多级表头',
    children: [
      {
        prop: 'name',
        label: 'Name'
      },
      {
        prop: 'address',
        label: 'Address'
      }
    ]
  }
])
</script>

多选 ​

暴露出 tableRef，可以调用原 el-table 方法

<template>
  <CxzTable
    ref="multipleTableRef"
    :columns="columns"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  />
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CxzTable } from 'cxz-ui'

import type { CxzTableColumn } from 'cxz-ui'

interface User {
  date: string
  name: string
  address: string
}

const columns = ref<CxzTableColumn<User>[]>([
  {
    type: 'selection',
    width: 55
  },
  {
    prop: 'date',
    label: 'Date',
    width: 120
  },
  {
    prop: 'name',
    label: 'Name',
    width: 120
  },
  {
    prop: 'address',
    label: 'Address',
    showOverflowTooltip: true
  }
])

const multipleTableRef = ref<InstanceType<typeof CxzTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value.tableRef!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value?.tableRef!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
</script>

Table 新增属性 ​

属性名说明类型默认值
columns配置列CxzTableColumn[][]

TableColumn 新增属性 ​

属性名说明类型默认值
render渲染函数(row,column,$index)=>anyundefined
slot插槽名称stringundefined
headerSlot头部插槽名称stringundefined
children子列CxzTableColumn[]undefined

Table 插槽 ​

插槽名说明
$append原 el-table append 插槽，加$防和其他插槽名称冲突
$empty原 el-table empty 插槽，加$防和其他插槽名称冲突

Released under the MIT License.

Copyright © 2023-present Chen Xing zhi