对element UI table二次封装(进行Column的自定义筛选展示和排序)

1.3.0版本增加table头自定义显示和排序功能

可以通过复选框选中来处理显示与否 ,通过拖拽来控制列的展示顺序

设置 show-fliter为true 增加uuid进行本地缓存

在用element table时候每次写页面都会重复写很多column标签导致页面重复代码过多并且分页组件也是每次都要引用导致很麻烦然后思前想后自己就对element进行了二次封装,

先看效果:

封装出来之后和正常使用的效果一样传入参数也基本差不多

1.引入npm包 -引入最新的玉林路扛把子UI库

yarn add htui-yllkbz

2在代码里面引用-引用方式和elementUI一样,在main.ts在全局引用

import Htui from "htui-yllkbz";
import "htui-yllkbz/lib/htui.css";
Vue.use(Htui);

3 HtTable组件引用 --标签引用 (里面如果你不需要特别处理的属性很多你都可以不传 ,默认会和element table保持一致)

  <!-- 用法参照element -table 参数通过columnns传递 -->
    <ht-table :data="state.tableData"
              @onchange='changePage'//分页查询回调
              style="width: 100%;margin-top:12px"
              :checked="true" //是否启用复选框
              :hide-page="false"//是否隐藏分页信息
              :hide-order="false"//是否隐藏序号列
              border
              @sort-change="sortChange"
              height="calc(100vh - 240px)"
              highlight-current-row
              :page-info="{//分页信息
                currentPage:state.filterData.currentPage,//当前页码
                pageSize:state.filterData.maxResultCount,//每页条数
                skipCount:state.filterData.skipCount,//跳过多少条(可以不管 传0也行)
                totalCount:state.filterData.totalCount,//总页数
              }"
              :columns="state.columns">//table列的配置
      <!-- 插槽显示 -->
      <template slot-scope="{row}"
                slot="state">//针对某些列需要插槽的时候 必须要传对应列 key值 如果是要重定义列的header则传入header_ +key值
        <span>玉林路扛把子</span>
      </template>
    </ht-table>

4 columns列信息配置

数据类型引入:

 import { Column } from "htui-yllkbz/src/packages/type";//里面具体类型跳转可以看
const column:Column =[
    {
      title: "工单名称",//列名称
      key: "workOrderName",//列key值 必须传且唯一
      width: "160px",//宽度
      hide: true,是否隐藏当前列
    //还有其他属性 通element的column属性
    },
    {
      title: "设备名称",
      key: "devices[0].deviceName",
      width: 150,
    },
    {
      title: "部门",
      key: "mainteabce.organizationUnitId",
    },

    {
      title: "执行人",
      key: "executor",
    },
    {
      title: "运行模型",
      key: "mainteabce.deviceInstanceModelName",
    },
    {
      title: "设备系统",
      sortable: "custom",
      key: "mainteabce.systemTypeName",
      minWidth: 100,
    },
    {
      title: "维保名称",
      key: "mainteabce.name",
      width: 170,
    },
    {
      title: "计划开始时间",
      key: "beginTime",
      width: 150,
     
      sortable: "custom",
      align: "center",
    },
    {
      title: "计划结束时间",
      key: "endTime",
    
      sortable: "custom",
      type: "time",
    },
    {
      title: "实际完成时间",
      key: "realEndTime",
      width: 150,
      
      sortable: "custom",
      align: "center",
    },
    {
      title: "创建时间",
      key: "creationTime",
     
      width: 150,
      sortable: "custom",
      align: "center",
    },
    {
      title: "任务状态",
      key: "state",
    },
    {
      title: "操作",
      key: "handel",
      width: show ? 180 : 160,
    },
  ]

最后附上npm地址:htui-yllkbz - npm## 安装使用https://www.npmjs.com/package/htui-yllkbz