vue3-demo-table-ts

基于vue3+Element-plus 封装的table组件

功能

原生Element-plus el-table	支持
分页器	支持
表格跨页多选	支持
动态数据	支持
页面可设置表格列顺序(拖拽)	支持
页面可设置表格列展示/隐藏	支持
默认展示列	支持
设置表格列按钮自定义	支持
最少展示列	支持
固定列	支持
多语言	支持
表头tooltip	支持
表格行自定义	支持

依赖

element-plus


vuedraggable
// 安装
yarn add vuedraggable
npm i vuedraggable

配置

1. 属性

字段名key	说明	类型	是否必填	可选值	默认值
columns	表格列 更多见	Object[]	必填	-	-
tableData	表格数据	Object[]	必填	-	-
showLoading	表格加载laoding	boolean	非必填	true/false	false
tableHeight	表格高度	string/number	非必填	-	'400'
selection	表格多选(原生el-table多选)	boolean	非必填	true/false	false
columnSetUp	设置表格列按钮 配置	Object	非必填	-	-
popover	是否展示设置表格列按钮	boolean	非必填	true/false	false
showPagination	展示分页器	Boolean	非必填	true/false	true
pageNumber	分页器当前页码	number	非必填	-	1
pageSize	每页条数	number	非必填	-	15
total	总条数	number	非必填	-	0
pageSizes	每页显示个数选择器的选项设置	number[]	非必填	-	[15, 30, 50, 100]
layout	组件布局，子组件名用逗号分隔	string	false	sizes / prev / pager/ next / jumper / -> / total / slot	" total, ->, slot, sizes, prev, pager, next"

更多属性可直接使用element-plus el-table 组件属性 https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7

2. columns 配置 Object[]

字段名key	说明	类型	是否必填	可选值
label	国际化	string	非必填	-
prop	表格列的key	string	非必填	-
width	列宽	number	非必填	-
slot	插槽名	string	非必填	-
show	表格列是否展示	boolean	必填	true/false
type	对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮	string	非必填	selection / index / expand
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧	string / boolean	非必填	true / 'left' / 'right'
heanderSlot	表头插槽; 自定义当前列表头	string	非必填	-
attrs	更多原生el-table-column属性	object	非必填	https://element-plus.org/zh-CN/component/table.html#table-%E5%B1%9E%E6%80%A7

3. columnSetUp 属性

字段名key	说明	类型	是否必填	可选值
title	下拉框提示语(支持国际化)	string	非必填	-
buttonText	按钮文案(支持国际化)	string	非必填	-
icon	按钮图标	string	非必填	el icon 名称
buttonSlotName	插槽:按钮不满足需求时可使用插槽自定义	string	非必填	-
minColumnNum	表格最少展示列数量	string	非必填	-
notShow	不展示在下拉框中的项的key	string[]	非必填

4. 方法

方法名	说明	参数
handleSizeChange	修改每页条数	size
handleCurrentChange	翻页	num
dragStart	设置表格列下拉框拖拽开始	event
dragEnd	设置表格列下拉框拖拽结束	columns

更多方法参考element-plus中 el-table 组件方法 https://element-plus.org/zh-CN/component/table.html#table-%E6%96%B9%E6%B3%95

5. 插槽

插槽名	说明	参数
search	表格上方一般存在筛选条件, 展示表格列设置按钮时,可以将查询按钮放到插槽中使之与设置表格列按钮齐平

拖拽

拖拽文档参考 https://www.itxst.com/vue-draggable-next/tutorial.html

示例

tsx

<Table  // 基础用法  tsx语法
  ref={ TableRef }
  columns={ column.value }
  tableData={ tableData.value }
  pageSize= { pageSize.value }
  pageNumber={ pageNumber.value }
  total= { total.value }
  border={ true }
  tableHeight={ tableHeight.value }
  onhandleSizeChange= { handleSizeChange }
  onhandleCurrentChange= { handleCurrentChange }
></Table>

vue3模板语法

<Table  // 基础用法 vue3 模板语法
  :columns="column"
  :tableData="tableData"
  :pageSize="pageSize"
  :pageNumber="pageNumber"
  :total="total"
  :border="true"
  :tableHeight="tableHeight"
  @handleSizeChange="handleSizeChange"
  @handleCurrentChange="handleCurrentChange"
></Table>

js

<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // 表格列 配置
    const column = ref([ // 注: 表格列必须使用ref,不能使用reactive(reactive拖拽排序后不会生效)
      {
        label: 'selection', // 国际化
        prop: 'selection', // 列字段key 
        width: 50, // 列宽
        slot: 'selection', // 列插槽名称
        heanderSlot: 'selectionHeander', // 表头插槽名称
        show:true // 是否展示列, 必填
       },
    ])
    // 表格数据
    const tableData = ref([])
    // 总条数
    const total = ref(0)
    // 每页条数
    const pageSize = ref(15)
    // 当前页码
    const pageNumber = ref(1)
    // 设置表格列按钮 配置
    const columnSetUp = ref({
      title:'1111', // 下拉框提示语
      buttonText: '2222', // 设置表格列展示按钮文案
      icon: 'Search', // 按钮图标
      buttonSlot: 'xxxxxxx', // 按钮插槽名称
      minColumnNum: 3, // 表格列最少展示数量 包含不参与拖拽的列
      notShow: ['selection', 'operation'], // 不展示在表格列设置列表中 列的prop[] 不参与拖拽
    })
    
    // 修改每页条数
    function handleSizeChange(size) {
      pageSize.value = size
      // TODO 获取表格数据
      getTableData(pageSize.value, pageNumber.value)
    }
    // 翻页
    function handleCurrentChange(value) {
      pageNumber.value = value
      // TODO 获取表格数据
      getTableData(pageSize.value, pageNumber.value)
    }
    // 复选框选中回调 当页全选
    const handleSelectionChange = (value) => {
      // TODO
    }
    // 获取表格数据
    const getTableData = (size, num) => {
      const data = cloneDeep(formData.value)
      return 接口(data).then((resp) => {
        tableData.value = resp.data.list
        total.value = resp.data.total
        pageSize.value = resp.data.pageSize
        pageNumber.value = resp.data.pageNum
      })
    }
    const draggableEnd = (value) => {
      // 结束拖拽
      column.value = value
    }
    const tableHeight = ref()
    nextTick(() => {
        // 表格高度
        tableHeight.value = `${TableRef.value.$el.clientHeight - 36}`
    })
    return{
      column,
      tableData,
      total,
      pageSize,
      pageNumber,
      handleSizeChange,
      handleCurrentChange,
      tableHeight,
      handleSelectionChange,
      columnSetUp,
    }
  },
})
</script>

表格多选

当页全选 组件属性 `selection` 设置为 `true`
方法使用原生element=plus el-table的多选方法即可

// 跨页多选
const column = ref([ // 注: 表格列必须使用ref,不能使用reactive(reactive拖拽排序后不会生效)
  {  // 自定义表格全选列
    label: 'selection',
    prop: 'selection',
    width: 50,
    slot: 'selection',
    heanderSlot: 'selectionHeander',
    show:true
  },
  ...
])
// 表格全部Ids
const tableAllIds = ref([])
// 表格已选中id列表
const tableSelectedIdList = ref([])
// 表格是否全选
const checkedAll = ref(false)
// 表格是否半选
const isIndeterminate = ref(false)
// 表格全选框改变
const handleCheckAllChange = () => {
	tableSelectedIdList.value = checkedAll.value ? cloneDeep(tableAllIds.value) : []
}
// 表格行复选框选框改变
const handleCheckChange = (row) => {
// TODO 判断当前行选中状态, true则添加id, false删除id
if (row.checked) {
	tableSelectedIdList.value.push(row.id)
} else {
	tableSelectedIdList.value.splice(tableSelectedIdList.value.findIndex(item => item === row.id), 1)
}
}
// 监视已选中id列表 控制全选框的状态
watch(() => tableSelectedIdList.value, newValue => {
	checkedAll.value = newValue.length === tableAllIds.value.length
	isIndeterminate.value = newValue.length < tableAllIds.value.length && newValue.length !== 0
}, {deep: true})
// 获取表格数据
const getTableData = () => {
  return contractList().then((resp) => {
    ...
    tableData.value = resp.data.list.map(item => {
      // 主要下面这行代码 全选后翻页设置表格行选中状态
      // 当前行id在已勾选列表中,状态为选中
      item.checked = prop.tableSelectedIdList.includes(item.id)
      return item
    })
    // allDataIds 该属性名为表格全部数据id[],后端返回
    tableAllIds.value = resp.data.allDataIds
    ...
  })
}

组件使用插槽自定义表头复选框及行复选框 ===========================================================
// tsx
<Table
  ...
  v-slots={{
    selectionHeander: ({tableData}) => (
      <>
        <el-checkbox
          v-model={ checkedAll.value }
          indeterminate={ isIndeterminate.value }
          disabled={ !tableData.length }
          onChange={ () => handleCheckAllChange() }
        />
      </>
    ),
    selection: ({row}) => <el-checkbox
      v-model={ row.checked }
      onChange={ () => handleCheckChange(row) }
      />
  }}
  ...
></Table>