JSPM – element-plus-data-table@1.0.3

Package Exports

element-plus-data-table
element-plus-data-table/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (element-plus-data-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

本组件是在element plus table的基础上封装的DataTable组件集成Table和pagination组件。所以支持Table和pagination所有的属性和事件。并且支持本地分页和格式化和jsx。

效果图

属性	描述	类型	默认值
layout	分页布局	String	'total, sizes, prev, pager, next, jumper'
total	数据总数	Number	0
data	数据	Array
columns	列头	Array
pagination	是否分页	Boolean	false
localPagination	是否启用本地分页	Boolean	false
mergeProps	需要合并的列属性名数组	String[]	[]

@pageSizeChange	pageSize事件参数	当前的pageSize
@pageNoChange	pageNo事件参数	当前的pageNo

render	格式化单元格函数	render({row,cellValue,prop,index,pageNo,pageSize})=>{}

下面给是使用实例

<template>
  <DataTable
    v-model:page-size="pageSize"
    v-model:current-page="currentPage"
    :data="tableData"
    :columns="column"
    :total="total"
    :pagination="true"
    local-pagination
    :border="true"
    :merge-props="['name', 'age']"
  />
</template>
<script setup lang="jsx">
  import { DataTable } from 'element-plus-data-table/index.js'
  import 'element-plus-data-table/index.css'

  const column = [
    {
      label: '序号',
      type: 'rowNumber',
      width: 55,
      align: 'center'
    },
    {
      prop: 'name',
      label: '姓名',
      children: [
        { prop: 'name', label: '姓名1' },
        { prop: 'name2', label: '姓名2' },
        { prop: 'name3', label: '姓名3' },
        { prop: 'name4', label: '姓名4' },
        { prop: 'name5', label: '姓名5' }
      ]
    },
    { prop: 'age', label: '年龄' },
    {
      prop: 'address',
      label: '地址',
      formatter: (row, column, cellValue, index) => {
        return `我的地址：${cellValue}`
      },
      render: ({ row, value, prop, $index }) => {
        return (
          <el-button
            onClick={() => {
              ElMessage.success(`点击了${row.name}的${prop}按钮`)
            }}
          >
            <span>{value}</span>和{$index}
          </el-button>
        )
      }
    }
  ]

  const tableData = [
    { name: '张三', age: 20, address: '北京' },
    { name: '张三', age: 20, address: '上海' },
    { name: '李四', age: 25, address: '广州' },
    { name: '李四', age: 25, address: '深圳' },
    { name: '王五', age: 30, address: '杭州' }
  ]
  // 分页相关
  const currentPage = ref(1)
  const pageSize = ref(10)
  const total = ref(100)
</script>