vue-table-config v1.0.2

table-config

基于element-ui中Table组件进行深度改造，支持表格列排序、列宽调整、列隐藏、列固定等功能...通过少量代码配置，使用render函数自定义列，减少dom代码开发

引入

import Vue from "vue";
import TableConfig from "vue-table-config/index.umd.min";
import "vue-table-config/index.css";
Vue.use(TableConfig);

使用

<table-config :columns="columns" :data="listData" tableKey="table"></table-config>

listData: [
        {
          id: 11, name: '第三方', age: '23', date: Date.now(), job: '学生',
        },
        {
          id: 22, name: '第三方', age: '23', date: Date.now(), job: '老师',
        },
        {
          id: 33, name: '第三方', age: '23', date: Date.now(), job: '工程师',
        },
      ],
      columns: [
        { type: 'selection' },
        { type: 'index', label: '序号', width: '60px' },
        { prop: 'id', label: 'id' },
        { prop: 'name', label: '姓名' },
        { prop: 'job', label: '职业' },
        { prop: 'age', label: '年龄' },
        {
          label: '生日',
          render: (h, params) => h('span', { attrs: { style: 'color:#e33333' } }, new Date(params.row.date).toLocaleString()),
        },
      ],

Feature

• 表头动态拖拽
• 单元格内容自定义伸缩/展开
• 翻页组件集成
• 兼容element-ui Table参数

属性

Column item

方法

事件