基于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>