ssPlus基础组件文档

Appearance

Return to top
On this page

Table 表格

用于展示多条结构类似的数据， 可对数据进行排序、筛选、对比或其他自定义操作。

基础用法

基本用法 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="基本用法"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  // border: true,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="基本用法"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  // border: true,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

边框表格

加边框
在table对象中添加border:true
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="加边框"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  border: true,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="加边框"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  border: true,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

复选框表格

复选框
在table对象中添加firstColumn:{ type: 'selection', fixed: true }
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="复选框"
        ref="selectionTable"
        :table="table"
        :columns="table.columns"
        @selection-change="selectionChange"
        :isShowPagination="false"
      >
        <template #toolbar>
          <el-button
            size="default"
            type="primary"
            :disabled="state.ids.length < 1"
            @click="cancelSelect"
            >取消选中</el-button
          >
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let table = {
  firstColumn: { type: 'selection', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
let state = reactive({
  ids: [],
})
// 选择复选框
const selectionChange = (val: any) => {
  console.log('选择复选框', val)
  state.ids = val
}
// 取消选中
const cancelSelect = () => {
  console.log('取消选中', selectionTable.value)
  if (state.ids.length > 0) {
    console.log('取消选中222', selectionTable.value)
    selectionTable.value.clearSelection()
  }
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="复选框"
        ref="selectionTable"
        :table="table"
        :columns="table.columns"
        @selection-change="selectionChange"
        :isShowPagination="false"
      >
        <template #toolbar>
          <el-button
            size="default"
            type="primary"
            :disabled="state.ids.length < 1"
            @click="cancelSelect"
            >取消选中</el-button
          >
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let table = {
  firstColumn: { type: 'selection', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
let state = reactive({
  ids: [],
})
// 选择复选框
const selectionChange = (val: any) => {
  console.log('选择复选框', val)
  state.ids = val
}
// 取消选中
const cancelSelect = () => {
  console.log('取消选中', selectionTable.value)
  if (state.ids.length > 0) {
    console.log('取消选中222', selectionTable.value)
    selectionTable.value.clearSelection()
  }
}
</script>

单选框表格

单选框
在table对象中添加firstColumn:{ type: 'radio', fixed: true },可以再次点击取消选中；添加@radioChange事件传当前选中行是数据
默认点击整行选中 可以设置rowClickRadio：false,只有点击单选框才选中
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="单选框"
        ref="selectionTable"
        :table="table"
        :columns="table.columns"
        @radioChange="radioChange"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let table = {
  firstColumn: { type: 'radio', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
// 选择单选框
const radioChange = (val: any) => {
  console.log('选择单选框', val)
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="单选框"
        ref="selectionTable"
        :table="table"
        :columns="table.columns"
        @radioChange="radioChange"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
let table = {
  firstColumn: { type: 'radio', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
// 选择单选框
const radioChange = (val: any) => {
  console.log('选择单选框', val)
}
</script>

序列号表格

序列号
在table对象中添加firstColumn:{ type: 'index', fixed: true }；可以新增label属性来定义表头名默认'序号'
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="序列号"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  firstColumn: { type: 'index', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="序列号"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  firstColumn: { type: 'index', fixed: true },
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

双击单元格复制(默认开启)

双击单元格复制
若需要关闭（在 TTable 标签中设置属性：isCopy:false）
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="双击单元格复制"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="双击单元格复制"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

字典过滤渲染

字典过滤渲染
columns中某项添加filters: { list: 'statusList', key: 'id', label: 'label' }
table中添加listTypeInfo: { statusList:[数据源] }字典类型的数据源
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="字典过滤渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: '字典过滤',
      minWidth: '80',
      filters: { list: 'statusList', key: 'id', label: 'label' },
    },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
  // 字典渲染数据源
  listTypeInfo: {
    statusList: [
      {
        id: '1',
        label: '待办',
      },
      {
        id: '2',
        label: '待审批',
      },
      {
        id: '3',
        label: '报废',
      },
    ],
  },
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="字典过滤渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: '字典过滤',
      minWidth: '80',
      filters: { list: 'statusList', key: 'id', label: 'label' },
    },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
  // 字典渲染数据源
  listTypeInfo: {
    statusList: [
      {
        id: '1',
        label: '待办',
      },
      {
        id: '2',
        label: '待审批',
      },
      {
        id: '3',
        label: '报废',
      },
    ],
  },
}
</script>

表头合并单元格（多级表头）

表头合并
只需要配置columns中某项新增children：Array[]属性;表头合并自动加边框
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="表头合并"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    {
      prop: 'name',
      label: '姓名',
      minWidth: '100',
      children: [
        {
          prop: 'name',
          label: '姓名',
          minWidth: '100',
          children: [
            {
              prop: 'type',
              label: '类型',
              minWidth: '100',
              children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
            },
          ],
        },
        {
          prop: 'type',
          label: '表头合并1',
          minWidth: '100',
          children: [
            {
              prop: 'type',
              label: '类型',
              minWidth: '100',
              children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
            },
          ],
        },
        { prop: 'name', label: '姓名', minWidth: '100' },
        {
          prop: 'date',
          label: '表头合并2',
          minWidth: '180',
          children: [
            { prop: 'type', label: '类型', minWidth: '100' },
            {
              prop: 'date',
              label: '日期',
              minWidth: '180',
              children: [{ prop: 'date1', label: '日期22', minWidth: '180' }],
            },
          ],
        },
      ],
    },
    {
      prop: 'name',
      label: '姓名',
      minWidth: '100',
      children: [
        {
          prop: 'type',
          label: '类型',
          minWidth: '100',
          children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
        },
      ],
    },
    {
      prop: 'type',
      label: '表头合并1',
      minWidth: '100',
      children: [
        {
          prop: 'type',
          label: '类型',
          minWidth: '100',
          children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
        },
      ],
    },
    { prop: 'name', label: '姓名', minWidth: '100' },
    {
      prop: 'date',
      label: '表头合并2',
      minWidth: '180',
      children: [
        { prop: 'type', label: '类型', minWidth: '100' },
        {
          prop: 'date',
          label: '日期',
          minWidth: '180',
          children: [{ prop: 'date1', label: '日期22', minWidth: '180' }],
        },
      ],
    },
    { prop: 'address', label: '地址', minWidth: '220' },
    { prop: 'date1', label: '日期', minWidth: '180' },
    { prop: 'address1', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="表头合并"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    {
      prop: 'name',
      label: '姓名',
      minWidth: '100',
      children: [
        {
          prop: 'name',
          label: '姓名',
          minWidth: '100',
          children: [
            {
              prop: 'type',
              label: '类型',
              minWidth: '100',
              children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
            },
          ],
        },
        {
          prop: 'type',
          label: '表头合并1',
          minWidth: '100',
          children: [
            {
              prop: 'type',
              label: '类型',
              minWidth: '100',
              children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
            },
          ],
        },
        { prop: 'name', label: '姓名', minWidth: '100' },
        {
          prop: 'date',
          label: '表头合并2',
          minWidth: '180',
          children: [
            { prop: 'type', label: '类型', minWidth: '100' },
            {
              prop: 'date',
              label: '日期',
              minWidth: '180',
              children: [{ prop: 'date1', label: '日期22', minWidth: '180' }],
            },
          ],
        },
      ],
    },
    {
      prop: 'name',
      label: '姓名',
      minWidth: '100',
      children: [
        {
          prop: 'type',
          label: '类型',
          minWidth: '100',
          children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
        },
      ],
    },
    {
      prop: 'type',
      label: '表头合并1',
      minWidth: '100',
      children: [
        {
          prop: 'type',
          label: '类型',
          minWidth: '100',
          children: [{ prop: 'date1', label: '日期2552', minWidth: '180' }],
        },
      ],
    },
    { prop: 'name', label: '姓名', minWidth: '100' },
    {
      prop: 'date',
      label: '表头合并2',
      minWidth: '180',
      children: [
        { prop: 'type', label: '类型', minWidth: '100' },
        {
          prop: 'date',
          label: '日期',
          minWidth: '180',
          children: [{ prop: 'date1', label: '日期22', minWidth: '180' }],
        },
      ],
    },
    { prop: 'address', label: '地址', minWidth: '220' },
    { prop: 'date1', label: '日期', minWidth: '180' },
    { prop: 'address1', label: '地址', minWidth: '220' },
  ],
}
</script>

表格操作按钮

操作列
在组件中需配置：operator数组
operator 数组是显示按钮数且点击后将当前行数据传出
operatorConfig 对象是操作列样式（可以设置宽度/列标题及是否固定在最左/右侧）
按钮的颜色是以 ElementUI 内置 button 的 type 为准
隐藏按钮——noshow:多种状态控制按钮的显示与隐藏
例如：noshow:[{key:'fields',val:'isHasVal'},{key:'status',val:[0,1,99]},{key:'channelCode',val:['bank']}]
注释： noshow 中的 key 值(fields/status/channelCode)是表格后台返回的字段
当 val 等于字符串'isHasVal'时,字段'fields'返回为空时，此行操作按钮隐藏
以上综合：当'status'为 0/1/99 并且'channelCode'为'bank'及'fields'为空时
show: { key: 'status', val: [3,4] }表 status 值为 3 或者 4 时，显示此操作健 根据后台字段返回是数字还是字符串来显示
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="操作列"
        ref="selectionTable"
        :table="state.table"
        :columns="state.table.columns"
        @selection-change="selectionChange"
        :isShowPagination="false"
      >
        <template #toolbar>
          <el-button
            size="default"
            type="primary"
            :disabled="state.ids.length < 1"
            @click="cancelSelect"
            >取消选中</el-button
          >
          <el-button size="default" type="primary" @click="add">新增</el-button>
          <el-button
            size="default"
            type="danger"
            :disabled="state.ids.length < 1"
            @click="del"
            >删除</el-button
          >
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue'
const viewDetail = (val) => {
  console.log('viewDetail', val)
}
const edit = (val) => {
  console.log('edit', val)
}
const nullify = (val) => {
  console.log('nullify', val)
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
let state = reactive({
  table: {
    firstColumn: { type: 'selection', fixed: true },
    // 接口返回数据
    data: [
      {
        id: '1',
        date: '2019-09-25',
        date1: '2019-09-26',
        name: '张三',
        status: '2',
        address: '广东省广州市天河区',
      },
      {
        id: '2',
        date: '2019-09-26',
        date1: '2019-09-27',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
      {
        id: '3',
        date: '2019-09-26',
        date1: '2019-09-28',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
      {
        id: '4',
        date: '2019-09-26',
        date1: '2019-09-29',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
    ],
    // 表头数据
    columns: [
      { prop: 'name', label: '姓名', minWidth: '100' },
      { prop: 'date', label: '日期', minWidth: '180' },
      {
        prop: 'status',
        label: '状态',
        minWidth: '220',
      },
      { prop: 'date1', label: '日期22', minWidth: '180' },
      {
        prop: 'address',
        label: '地址',
        minWidth: '220',
      },
    ],
    // 表格内操作列
    operator: [
      {
        text: '查看',
        fun: viewDetail,
        show: { key: 'status', val: ['1'] },
      },
      {
        text: '编辑',
        fun: edit,
      },
      {
        text: '作废',
        fun: nullify,
      },
    ],
    // 操作列样式
    operatorConfig: {
      fixed: 'right', // 固定列表右边（left则固定在左边）
      width: 200,
      label: '操作',
    },
  },
  ids: [],
})
// 选择复选框
const selectionChange = (val: any) => {
  console.log('选择复选框', val)
  state.ids = val
}
// 取消选中
const cancelSelect = () => {
  console.log('取消选中', selectionTable.value)
  if (state.ids.length > 0) {
    console.log('取消选中222', selectionTable.value)
    selectionTable.value.clearSelection()
  }
}
// 新增按钮
const add = () => {
  console.log('add按钮')
}
// 删除按钮
const del = () => {
  console.log('del按钮')
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="操作列"
        ref="selectionTable"
        :table="state.table"
        :columns="state.table.columns"
        @selection-change="selectionChange"
        :isShowPagination="false"
      >
        <template #toolbar>
          <el-button
            size="default"
            type="primary"
            :disabled="state.ids.length < 1"
            @click="cancelSelect"
            >取消选中</el-button
          >
          <el-button size="default" type="primary" @click="add">新增</el-button>
          <el-button
            size="default"
            type="danger"
            :disabled="state.ids.length < 1"
            @click="del"
            >删除</el-button
          >
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
import { reactive, ref } from 'vue'
const viewDetail = (val) => {
  console.log('viewDetail', val)
}
const edit = (val) => {
  console.log('edit', val)
}
const nullify = (val) => {
  console.log('nullify', val)
}
// 获取ref
const selectionTable: any = ref<HTMLElement | null>(null)
let state = reactive({
  table: {
    firstColumn: { type: 'selection', fixed: true },
    // 接口返回数据
    data: [
      {
        id: '1',
        date: '2019-09-25',
        date1: '2019-09-26',
        name: '张三',
        status: '2',
        address: '广东省广州市天河区',
      },
      {
        id: '2',
        date: '2019-09-26',
        date1: '2019-09-27',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
      {
        id: '3',
        date: '2019-09-26',
        date1: '2019-09-28',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
      {
        id: '4',
        date: '2019-09-26',
        date1: '2019-09-29',
        name: '张三1',
        status: '1',
        address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
      },
    ],
    // 表头数据
    columns: [
      { prop: 'name', label: '姓名', minWidth: '100' },
      { prop: 'date', label: '日期', minWidth: '180' },
      {
        prop: 'status',
        label: '状态',
        minWidth: '220',
      },
      { prop: 'date1', label: '日期22', minWidth: '180' },
      {
        prop: 'address',
        label: '地址',
        minWidth: '220',
      },
    ],
    // 表格内操作列
    operator: [
      {
        text: '查看',
        fun: viewDetail,
        show: { key: 'status', val: ['1'] },
      },
      {
        text: '编辑',
        fun: edit,
      },
      {
        text: '作废',
        fun: nullify,
      },
    ],
    // 操作列样式
    operatorConfig: {
      fixed: 'right', // 固定列表右边（left则固定在左边）
      width: 200,
      label: '操作',
    },
  },
  ids: [],
})
// 选择复选框
const selectionChange = (val: any) => {
  console.log('选择复选框', val)
  state.ids = val
}
// 取消选中
const cancelSelect = () => {
  console.log('取消选中', selectionTable.value)
  if (state.ids.length > 0) {
    console.log('取消选中222', selectionTable.value)
    selectionTable.value.clearSelection()
  }
}
// 新增按钮
const add = () => {
  console.log('add按钮')
}
// 删除按钮
const del = () => {
  console.log('del按钮')
}
</script>

集成分页器

集成分页器
el.pagination.total
  • 1
  • 2
el.pagination.goto
el.pagination.pageClassifier
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table title="集成分页器" :table="table" :columns="table.columns" />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
// import { onMounted } from 'vue'
const table = {
  total: 20,
  currentPage: 1,
  pageSize: 10,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// onMounted(() => {
//   table.total = 100
// })
// 选择当前展示的总页码
const handlesSizeChange = (val) => {
  console.log('选择当前展示的总页码', val)
  table.pageSize = val
}
// 选择当前页码
const handlesCurrentChange = (val) => {
  console.log('选择当前页码', val)
  table.currentPage = val
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table title="集成分页器" :table="table" :columns="table.columns" />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
// import { onMounted } from 'vue'
const table = {
  total: 20,
  currentPage: 1,
  pageSize: 10,
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
// onMounted(() => {
//   table.total = 100
// })
// 选择当前展示的总页码
const handlesSizeChange = (val) => {
  console.log('选择当前展示的总页码', val)
  table.pageSize = val
}
// 选择当前页码
const handlesCurrentChange = (val) => {
  console.log('选择当前页码', val)
  table.currentPage = val
}
</script>

某列 render 渲染

某列render渲染 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="某列render渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '日期22', minWidth: '180' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="某列render渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '日期22', minWidth: '180' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

某列 作用域插槽渲染

某列插槽渲染 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="某列插槽渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      >
        <!-- 插槽渲染 -->
        <template #date1="{ scope }">
          <div>{{ scope.row.date1 }}</div>
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '插槽渲染', minWidth: '180', slotName: 'date1' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="某列插槽渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      >
        <!-- 插槽渲染 -->
        <template #date1="{ scope }">
          <div>{{ scope.row.date1 }}</div>
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '插槽渲染', minWidth: '180', slotName: 'date1' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

自定义表头渲染

自定义表头渲染 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="自定义表头渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      >
        <!-- 插槽渲染 -->
        <template #date1="{ scope }">
          <div>{{ scope.row.date1 }}</div>
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    {
      prop: 'date',
      label: '自定义表头',
      minWidth: '180',
      //  renderHeader: column => {
      //    console.log(789, column)
      //    return (
      //      <div>
      //        <span style="color:red">自定义表头</span>
      //        <search style="width: 1em; height: 1em; margin-right: 8px" />
      //      </div>
      //    )
      //  }
    },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '插槽渲染', minWidth: '180', slotName: 'date1' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="自定义表头渲染"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      >
        <!-- 插槽渲染 -->
        <template #date1="{ scope }">
          <div>{{ scope.row.date1 }}</div>
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="tsx">
const table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    {
      prop: 'date',
      label: '自定义表头',
      minWidth: '180',
      //  renderHeader: column => {
      //    console.log(789, column)
      //    return (
      //      <div>
      //        <span style="color:red">自定义表头</span>
      //        <search style="width: 1em; height: 1em; margin-right: 8px" />
      //      </div>
      //    )
      //  }
    },
    {
      prop: 'status',
      label: 'render方式',
      minWidth: '220',
      //  render: val => {
      //    let label
      //    switch (val) {
      //      case '1':
      //        label = '待办'
      //        break
      //      case '2':
      //        label = '待提交'
      //        break
      //      case '3':
      //        label = '完成'
      //        break
      //    }
      //    return <div>{label}</div>
      //  }
    },
    { prop: 'date1', label: '插槽渲染', minWidth: '180', slotName: 'date1' },
    {
      prop: 'address',
      label: '地址',
      minWidth: '220',
    },
  ],
}
</script>

动态显示隐藏列且可以拖动排序

动态显示隐藏列且可以拖动排序 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="动态显示隐藏列且可以拖动排序"
        :table="table"
        name="Vuepress2Docs"
        columnSetting
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="动态显示隐藏列且可以拖动排序"
        :table="table"
        name="Vuepress2Docs"
        columnSetting
        :columns="table.columns"
        :isShowPagination="false"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
let table = {
  // 接口返回数据
  data: [
    {
      id: '1',
      date: '2019-09-25',
      date1: '2019-09-26',
      name: '张三',
      status: '2',
      address: '广东省广州市天河区',
    },
    {
      id: '2',
      date: '2019-09-26',
      date1: '2019-09-27',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '3',
      date: '2019-09-26',
      date1: '2019-09-28',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
    {
      id: '4',
      date: '2019-09-26',
      date1: '2019-09-29',
      name: '张三1',
      status: '1',
      address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2',
    },
  ],
  // 表头数据
  columns: [
    { prop: 'name', label: '姓名', minWidth: '100' },
    { prop: 'date', label: '日期', minWidth: '180' },
    { prop: 'status', label: '状态', minWidth: '80' },
    { prop: 'address', label: '地址', minWidth: '220' },
  ],
}
</script>

单元格编辑功能

单元格编辑功能 
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="单元格编辑功能"
        :table="state.table"
        :columns="state.table.columns"
        :isShowPagination="false"
        :listTypeInfo="state.table.listTypeInfo"
        isShowFooterBtn
        @save="save"
        @handleEvent="handleEvent"
      >
        <template #packageNumEnd="{ scope }">
          <el-input clearable v-model="scope.row[scope.column.property]" />
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
// 保存
const save = (tableData) => {
  console.log('最终Table数据', tableData)
}
// 编辑单元格监听事件
const handleEvent = (type, val, index) => {
  console.log(
    `自己标识编辑单元格event值：${type}---修改后的值：${val}----当前所在行：${index}`
  )
}

let state = reactive({
  table: {
    // 接口返回数据
    data: [],
    // 表头数据
    columns: [
      {
        prop: 'area',
        label: '装炉位置',
        minWidth: '120',
        canEdit: true,
        configEdit: {
          label: '装炉位置',
          type: 'select-arr',
          editComponent: 'el-select',
          list: 'furnaceAreaList',
          arrLabel: 'dictLabel',
          arrKey: 'dictValue',
          event: '装炉位置area',
        },
      },
      {
        prop: 'layer',
        label: '装炉层',
        minWidth: '120',
        canEdit: true,
        configEdit: {
          label: '装炉层',
          type: 'select-arr',
          editComponent: 'el-select',
          list: 'furnaceLayerList',
          arrLabel: 'dictLabel',
          arrKey: 'dictValue',
          // event: '装炉层layer',
        },
      },
      {
        prop: 'isTail',
        label: '是否尾包',
        minWidth: '60',
        canEdit: true,
        configEdit: {
          label: '是否尾包',
          type: 'checkbox',
          editComponent: 'el-checkbox',
        },
      },
      {
        prop: 'packageNumStart',
        label: '开始编号',
        minWidth: '100',
        canEdit: true,
        configEdit: {
          label: '开始编号',
          type: 'input',
          editComponent: 'el-input',
        },
      },
      {
        prop: 'packageNumEnd',
        label: '使用插槽',
        minWidth: '100',
        canEdit: true,
        configEdit: {
          label: '使用插槽',
          type: 'input',
          editSlotName: 'packageNumEnd',
          // editComponent: 'el-input',
        },
      },
      { prop: 'startDate', label: '生产日期', minWidth: '100' },
      { prop: 'endDate', label: '出炉日期', minWidth: '100' },
      {
        prop: 'singleWeight',
        label: '单包重量（吨）',
        minWidth: '160',
        canEdit: true,
        configEdit: {
          label: '单包重量（吨）',
          type: 'input',
          editComponent: 'el-input-number',
          event: 'singleWeight',
        },
      },
    ],
    listTypeInfo: {
      furnaceAreaList: [
        {
          dictLabel: '炉头',
          dictValue: '1',
        },
        {
          dictLabel: '炉中',
          dictValue: '2',
        },
        {
          dictLabel: '炉尾',
          dictValue: '3',
        },
      ],
      furnaceLayerList: [
        {
          dictLabel: '上层',
          dictValue: '1',
        },
        {
          dictLabel: '中层',
          dictValue: '2',
        },
        {
          dictLabel: '下层',
          dictValue: '3',
        },
      ],
    },
  },
})

let resData = [
  {
    area: '1',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'jiangyx',
    createByName: '姜宇轩',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 3,
    createTime: '2022-06-06 09:44:17',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '1',
    id: 104,
    updateByName: '姜宇轩',
    updateTime: '2022-06-06 11:05:49',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2228, 2229, 2230],
  },
  {
    area: '2',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'libowen',
    createByName: '李博文',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 5,
    createTime: '2022-06-08 08:37:34',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '2',
    id: 105,
    updateByName: '李博文',
    updateTime: '2022-06-08 08:37:34',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2231, 2232, 2233, 2234, 2235],
  },
  {
    area: '3',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'libowen',
    createByName: '李博文',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 5,
    createTime: '2022-06-08 08:53:43',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '3',
    id: 106,
    updateByName: '李博文',
    updateTime: '2022-06-08 08:53:43',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2236, 2237, 2238, 2239, 2240],
  },
]
state.table.data = resData
</script>

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="单元格编辑功能"
        :table="state.table"
        :columns="state.table.columns"
        :isShowPagination="false"
        :listTypeInfo="state.table.listTypeInfo"
        isShowFooterBtn
        @save="save"
        @handleEvent="handleEvent"
      >
        <template #packageNumEnd="{ scope }">
          <el-input clearable v-model="scope.row[scope.column.property]" />
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue'
// 保存
const save = (tableData) => {
  console.log('最终Table数据', tableData)
}
// 编辑单元格监听事件
const handleEvent = (type, val, index) => {
  console.log(
    `自己标识编辑单元格event值：${type}---修改后的值：${val}----当前所在行：${index}`
  )
}

let state = reactive({
  table: {
    // 接口返回数据
    data: [],
    // 表头数据
    columns: [
      {
        prop: 'area',
        label: '装炉位置',
        minWidth: '120',
        canEdit: true,
        configEdit: {
          label: '装炉位置',
          type: 'select-arr',
          editComponent: 'el-select',
          list: 'furnaceAreaList',
          arrLabel: 'dictLabel',
          arrKey: 'dictValue',
          event: '装炉位置area',
        },
      },
      {
        prop: 'layer',
        label: '装炉层',
        minWidth: '120',
        canEdit: true,
        configEdit: {
          label: '装炉层',
          type: 'select-arr',
          editComponent: 'el-select',
          list: 'furnaceLayerList',
          arrLabel: 'dictLabel',
          arrKey: 'dictValue',
          // event: '装炉层layer',
        },
      },
      {
        prop: 'isTail',
        label: '是否尾包',
        minWidth: '60',
        canEdit: true,
        configEdit: {
          label: '是否尾包',
          type: 'checkbox',
          editComponent: 'el-checkbox',
        },
      },
      {
        prop: 'packageNumStart',
        label: '开始编号',
        minWidth: '100',
        canEdit: true,
        configEdit: {
          label: '开始编号',
          type: 'input',
          editComponent: 'el-input',
        },
      },
      {
        prop: 'packageNumEnd',
        label: '使用插槽',
        minWidth: '100',
        canEdit: true,
        configEdit: {
          label: '使用插槽',
          type: 'input',
          editSlotName: 'packageNumEnd',
          // editComponent: 'el-input',
        },
      },
      { prop: 'startDate', label: '生产日期', minWidth: '100' },
      { prop: 'endDate', label: '出炉日期', minWidth: '100' },
      {
        prop: 'singleWeight',
        label: '单包重量（吨）',
        minWidth: '160',
        canEdit: true,
        configEdit: {
          label: '单包重量（吨）',
          type: 'input',
          editComponent: 'el-input-number',
          event: 'singleWeight',
        },
      },
    ],
    listTypeInfo: {
      furnaceAreaList: [
        {
          dictLabel: '炉头',
          dictValue: '1',
        },
        {
          dictLabel: '炉中',
          dictValue: '2',
        },
        {
          dictLabel: '炉尾',
          dictValue: '3',
        },
      ],
      furnaceLayerList: [
        {
          dictLabel: '上层',
          dictValue: '1',
        },
        {
          dictLabel: '中层',
          dictValue: '2',
        },
        {
          dictLabel: '下层',
          dictValue: '3',
        },
      ],
    },
  },
})

let resData = [
  {
    area: '1',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'jiangyx',
    createByName: '姜宇轩',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 3,
    createTime: '2022-06-06 09:44:17',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '1',
    id: 104,
    updateByName: '姜宇轩',
    updateTime: '2022-06-06 11:05:49',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2228, 2229, 2230],
  },
  {
    area: '2',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'libowen',
    createByName: '李博文',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 5,
    createTime: '2022-06-08 08:37:34',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '2',
    id: 105,
    updateByName: '李博文',
    updateTime: '2022-06-08 08:37:34',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2231, 2232, 2233, 2234, 2235],
  },
  {
    area: '3',
    singleWeight: 1.0,
    endDate: '2022-06-06',
    updateBy: 'libowen',
    createByName: '李博文',
    remark: null,
    isDeleted: false,
    packageNumStart: 1,
    packageNumEnd: 5,
    createTime: '2022-06-08 08:53:43',
    isTail: false,
    startDate: '2022-06-06',
    workOrderBatchRecordId: 96,
    layer: '3',
    id: 106,
    updateByName: '李博文',
    updateTime: '2022-06-08 08:53:43',
    code: 'FJSMH1000106',
    isPrint: true,
    ids: [2236, 2237, 2238, 2239, 2240],
  },
]
state.table.data = resData
</script>

TTable 参数配置

1、代码示例

html
<t-table
  :table="table"
  :columns="table.columns"
  @size-change="handlesSizeChange"
  @page-change="handlesCurrentChange"
/>

<t-table
  :table="table"
  :columns="table.columns"
  @size-change="handlesSizeChange"
  @page-change="handlesCurrentChange"
/>

2、配置参数（Table Attributes）

参数说明类型默认值
table表格数据对象Object{}
---data展示数据Array[]
---toolbar表格外操作栏选中表格某行，可以将其数据传出Array[]
---operator表格内操作栏数据Array[]
-------show表格内操作栏根据状态显示Object-
-------noshow表格内操作栏根据多种状态不显示Array-
---operatorConfig表格内操作栏样式Object-
---firstColumn表格首列(序号 index,复选框 selection）排列object-
---total数据总条数Number-
---pageSize页数量Number-
---currentPage是否需要显示切换页条数Number-
columns表头信息Array[]
----sort排序 （设置：sort:true）Booleanfalse
----renderHeader列标题 Label 区域渲染使用的 Function(val) 可以用 jsx 方式Function-
----bindel-table-column AttributesObject-
----noShowTip是否换行 （设置：noShowTip:true）Booleanfalse
----slotName插槽显示此列数据（其值是具名作用域插槽String-
----------param具名插槽获取此行数据必须用解构接收{scope}.row 是当前行数据 }Object-
----canEdit是否开启单元格编辑功能Booleanfalse
----configEdit表格编辑配置（开启编辑功能有效）Object-
----------labelplaceholder 显示String-
----------editComponent组件名称可直接指定全局注册的组件，也可引入'element/abtd'如：'a-input/el-input'String-
----------bind第三方 UI 的 Attributes，如 el-input 中的 clearable 清空功能Object-
----------event触发 handleEvent 事件的标志String-
----------type下拉或者复选框显示（select-arr/select-obj/checkbox）String-
----------list下拉选择数据源名称String-
----------arrLabeltype:select-arr 时对应显示的中文字段String-
----------arrKeytype:select-arr 时对应显示的数字字段String-
----filters字典过滤Object-
----------listlistTypeInfo 里面对应的下拉数据源命名String-
----------key数据源的 key 字段String'value'
----------label数据源的 label 字段String'label'
listTypeInfo下拉选择数据源Object-
footer底部操作区（默认隐藏，使用插槽展示“保存”按钮）slot-
isShowFooterBtn是否显示保存按钮Booleanfalse
title表格左上标题String /slot-
isShowPagination是否显示分页(默认显示分页)Booleantrue
isTableColumnHidden是否开启合计行隐藏复选框/单选框Booleanfalse
isCopy是否允许双击单元格复制Booleantrue
rowClickRadio是否开启点击整行选中单选框Booleantrue
columnSetting是否显示设置（隐藏/显示列）Booleanfalse
name与 columnSetting 配合使用标记隐藏/显示列唯一性Stringtitle

3、events 其他事件按照 el-table 直接使用（如 sort-change 排序事件）

事件名说明返回值
page-change当前页码当前选中的页码
save保存按钮编辑后的所有数据
handleEvent单个输入触发事件configEdit 中的 event 值和对应输入的 value 值
radioChange单选选中事件返回当前选中的整行数据

4、Methods 方法

事件名说明参数
clearSelection用于多选表格，清空用户的选择-
clearSort清空排序条件-
toggleRowSelection取消某一项选中项-