Table 表格

Table 表格

展示多条结构类似的数据，可对数据进行排序、筛选、分页展示等操作。
表格左上方存在自定义功能区，可通过插槽的方式，放置需要的功能按钮。功能区默认包括自定义列设置功能，可根据需要控制表格列展示、隐藏、排序等。
表格左下方存在批量操作功能区，有默认的批量修改，批量删除功能。

基础表格

基础的表格展示用法。

此处放置代码示例的描述信息，支持 Markdown 语法，描述信息只支持单行

<template>
  <th-table
    selection
    highlight-current-row
    ref="table"
    :columns="tableColumns"
    :data="tableData"
    :total="tableTotalCount"
    @pageChange="getList"
  ></th-table>
</template>

<script>

export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'supply_name',
          name: '供应商名称',
          showColumns: true,
        },
        {
          prop: 'product_number',
          name: '物料号',
          showColumns: true,
        },
        {
          prop: 'newer_supply_date',
          name: '现供应商承诺时间',
          showColumns: true,
        }
      ],
      tableData: [],
      tableTotalCount: 3,
      selectVal: [],
    };
  },
  methods: {
    getList(page = 1, pageSize = 8) {
      this.tableData = [
        {
          id: 77,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-21',
          product_number: 'ABC123',
        },
        {
          id: 78,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-28',
          product_number: 'ABC124',
          data_source: '延期交付',
        },
        {
          id: 79,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-13',
          product_number: 'ABC125',
          data_source: '延期交付',
        },
      ];
      this.tableTotalCount = 3;
    }
  },
};
</script>

<style></style>

Expand Copy Copy

完整表格

完整功能的表格展示用法。

此处放置代码示例的描述信息，支持 Markdown 语法，描述信息只支持单行

<template>
  <th-table
    selection
    highlight-current-row
    ref="table"
    settingMode="Complete"
    :columns="tableColumns"
    :data="tableData"
    :total="tableTotalCount"
    @pageChange="getList"
  >
    <template slot-scope="scope" slot="newer_supply_date">
      <el-date-picker
        style="width: 160px"
        type="date"
        :value="scope.row.newer_supply_date"
        placeholder="请选择"
      ></el-date-picker>
    </template>
    <template slot-scope="scope" slot="operation">
      <el-button type="text" size="small" @click="handleDetail(scope.row)">
        详情
      </el-button>
    </template>
    <template slot-scope="{ selectVal }" slot="footerArea">
      <!-- 批量通过 -->
      <el-button
        @click="batchAction(selectVal)"
        :disabled="!selectVal.length"
        type="primary"
        size="mini"
      >
        批量通过
      </el-button>
      <!-- 批量拒绝 -->
      <el-button
        @click="batchAction(selectVal)"
        :disabled="!selectVal.length"
        type="primary"
        size="mini"
      >
        批量拒绝
      </el-button>
    </template>
  </th-table>
</template>

<script>

export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'supply_name',
          name: '供应商名称',
          showColumns: true,
        },
        {
          prop: 'product_number',
          name: '物料号',
          showColumns: true,
        },
        {
          prop: 'newer_supply_date',
          name: '现供应商承诺时间',
          type: 'slot',
          width: 190,
          showColumns: true,
        },
        {
          prop: 'operation',
          name: '操作',
          fixed: 'right',
          type: 'slot',
          width: 120,
          showColumns: true,
        },
      ],
      tableData: [],
      tableTotalCount: 3,
      selectVal: [],
    };
  },
  methods: {
    getList(page = 1, pageSize = 8) {
      this.tableData = [
        {
          id: 77,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-21',
          product_number: 'ABC123',
        },
        {
          id: 78,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-28',
          product_number: 'ABC124',
          data_source: '延期交付',
        },
        {
          id: 79,
          supply_name: '测试供应商1',
          newer_supply_date: '2022-04-13',
          product_number: 'ABC125',
          data_source: '延期交付',
        },
      ];
      this.tableTotalCount = 3;
    },
    handleDetail() {
      this.$message.success('详情');
    },
    batchAction(selectVal) {
      console.log(selectVal);
    },
  },
};
</script>

<style></style>

Expand Copy Copy

虚拟滚动表格

适用于大数据量的表格展示。

样式暂存在问题未解决

<template>
  <th-memo-table
    :max-height="300"
    highlight-current-row
    ref="table"
    :columns="tableColumns"
    :data="tableData"
    :total="tableTotalCount"
    @pageChange="getList"
  ></th-memo-table>
</template>

<script>

export default {
  data() {
    return {
      tableColumns: [
        {
          prop: 'supply_name',
          name: '供应商名称',
          showColumns: true,
        },
        {
          prop: 'product_number',
          name: '物料号',
          showColumns: true,
        },
        {
          prop: 'newer_supply_date',
          name: '现供应商承诺时间',
          showColumns: true,
        }
      ],
      tableData: [],
      tableTotalCount: 0,
      selectVal: [],
    };
  },
  methods: {
    getList(page = 1, pageSize = 100) {
      // 清空原有数据
      this.tableData = [];
      // 生成100条数据
      for (let i = 0; i < 66; i++) {
        this.tableData.push({
          id: 77 + i,
          supply_name: '测试供应商' + (i + 1),
          newer_supply_date: '2022-04-21',
          product_number: 'ABC' + (123 + i),
          // 在部分数据中添加 data_source 字段
          ...(i % 2 === 0 ? { data_source: '延期交付' } : {}),
        });
      }
      // 更新总条数
      this.tableTotalCount = 66;
    }
  },
};
</script>

<style></style>

Expand Copy Copy

Table Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array		[]
columns	列配置(详细件下方的columns Attributes)	array		[]
prefixName	列名称前缀	string		''
topButtons	右上方的按钮组	array		[]
bottomButtons	底部的按钮组	array		[]
withPager	是否显示分页	boolean	true false	true
hideFooter	隐藏footer底部	boolean / null	true false null	null
total	数据总条数	number		0
pageSize	每页显示个数	number		10
withSetting	是否显示列设置	boolean	true false	true
settingMode	列设置模式	string	Complete Petite	Petite
loading	loading加载	boolean	true false	false
border	表格边框	boolean / string	true、false、'inner' 'outer' 'full' 'none' 'default'	'inner'
stripe	表格条纹	boolean	true false	undefined
size	表格尺寸	string	medium / small / mini	small
rowClassName	给行附加 className	Function({row, rowIndex}) / String
flexHeight	铺满屏幕，配合外面的flex布局，默认关闭	boolean / undefined	true false	undefined
parseUndefined	把data传入的 undefined 展示成 --	boolean / null	true false	null
rowHeight	行高	number	——
showOverflow	列表内容是否显示省略号	boolean / string	'ellipsis'（只显示省略号）、'title'（并且显示为原生 title）、'tooltip'（并且显示为 tooltip 提示）	true
shadow	显示阴影	boolean / null	true false null	null
highlightCurrentRow	高亮显示	boolean	true false	false
renderIndex	显示 type 为 ‘index’ 的 columns	boolean	true false	false
queryImmediate	初始化是否请求列表（用于搜索存在前置条件的场景 如部分弹窗）	boolean	true false	true
maxHeight	Table 的最大高度。合法的值为数字。	Number		——
minHeight	Table 的最大高度。合法的值为数字。	Number		——
selection	是否则显示多选框	boolean	true false	false
selectAble	设置某行勾选框不可用的方法	Function({row})		null
rowKey	列表行数据的key	string		id
reserveSelection	列表勾选 - 是否在数据更新之后保留之前选中的数据（仅对 type=selection 的列有效）	boolean	true false	false
batchChange	批量修改	Function([{row}])		null
batchDelete	批量删除	Function([{row}])		null
lazy	是否懒加载子节点数据	Boolean		——
load	加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息	Function(row, treeNode, resolve)		——
tree-props	渲染嵌套数据的配置选项	Object		{ hasChildren: 'hasChildren', children: 'children' }

columns Attributes

参数	说明	类型
props	对应的接口的字段，当type类型为slot时，也作为插槽名	string
name	列标题	string
sortable	传‘custom’ 开启列排序，会排序变化会触发 sortChange 事件	string
width	列最小宽度	string / number
fixedWidth	列固定宽度	string / number
showColumns	展示列设置	boolean
fixed	固定列	string(left/right)
filter	过滤方法 如 (v, item)=> { return v ? '是' : '否' }	Function({val, scope.row, this})
type	类型（插槽：slot/日期：date/日期不乘以1000：dateNoThousand/时间：dateTime/序号：No.）	undefined / string
header_type	列头部类型，传header-slot: 插槽类型,插槽名为 props + '_header'； columns 列选项传 header_type：'header-slot' 的插槽，插槽名为 props + '_header'，slot-scope 的值同'el-table-column'默认插槽的值（column，row，$index）	string
nameFn	自定义展示列名称	Function(val) => string
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	Boolean 不写该属性默认为 true

Table Events

事件名	说明	参数
expandChange	当用户对某一行展开或者关闭的时候会触发该事件	row, (expandedRows
sortChange	当表格的排序条件发生变化的时候会触发该事件	column, prop, order
settingChange	列设置弹窗保存回调	column
selectRow	当某一行被点击时会触发该事件	row, column, event
pageChange	分页查询	page size

Table Methods

方法名	说明	参数
init	初始化分页参数并触发查询
query	调用的查询 , 用于同步 分页状态	page size
queryAfterDelete	删除数据后调用的查询	deleteLength
clearSelection	跨页选择时，需主动调用的清空复选框选中状态的方法
toggleRowSelection	切换某一行的选中状态	row selected
setCurrentRow	设定某一行为选中行（高亮）	row
setTableSelect	设置 table 行的选中状态	rows(需选中的行), isCheck(是否选中)

Table Slot

name	说明	Slot参数
prop	type:'slot' 的自定义插槽	{column,row,$index}
prop + '_header'	自定义头部的插槽	{column,row,$index}
leftTop	左上方位置的插槽	{selectVal}
rightTop	右上方位置的插槽	{selectVal}
footerArea	底部位置的插槽	{selectVal}