vue-table-set

基于elementUI Table组件开发的一个table设置插件。

主要功能为：

1. 编辑表格的列显示，固定、排序、拖拽改变列顺序、在配置属性范围内增加和删减列字段等;

2. 列对齐方式，是否显示索引，是否支持多选等；

3. 支持elementUI Table组件的原生属性和事件。

install & Usage

# install dependencies
npm install vue-table-set

# Usage
import customTable from 'vue-table-set'
Vue.use(customTable)

# use in page
<custom-table :settingOpt="settingOpt" @updateTable="updateTable" @hiddenPanel="hiddenPanel"></custom-table>

Operation

鼠标右键单击表头可打开列表设置面板

Table Attributes

| 参数 | 说明 | 类型 | | ------------- |:-------------:| -----:| | settingOpt | 表格展示需要的表格参数 | Object |

settingOpt item

以下设置项均为必须项，缺少则不能正常运行

| item | 说明 | 类型 | | ------------- |:-------------| :-----:| | panelVisible | 列表设置面板是否显示 | Boolean | | tableIndex | 是否显示表格索引 | Boolean | | tableSelect | 是否显示表格多选 | Boolean | | tableAlign | 列表对齐方式 (left /center/right) | String | | allTitles | 可配置的所有列字段 | Array | | tableTitles | 当前已配置的可显示列字段（与当前表格显示字段值相同）| Array | | showTitles | 当前表格的显示字段（与当前可配置的可显示列字段值相同）| Array | | tableData | 表格数据 | Array |

settingOpt数据格式

settingOpt: {
    panelVisible: false, // 设置面板是否打开
    tableIndex: true, // 是否显示表格索引
    tableSelect: true, // 是否显示表格多选
    tableAlign: 'left', // left center right
    allTitles: [{
        prop: "name", // 列字段
        label: "姓名", // 列字段显示名称
        sortable: true, // 列字段是否支持排序
        width: "", // 列宽
        fixed: false // 当前列是否固定
    }],
    tableTitles: [{
        prop: "name", // 列字段
        label: "姓名", // 列字段显示名称
        sortable: true, // 列字段是否支持排序
        width: "", // 列宽
        fixed: false // 当前列是否固定
    }],
    showTitles: [{
        prop: "name", // 列字段
        label: "姓名", // 列字段显示名称
        sortable: true, // 列字段是否支持排序
        width: "", // 列宽
        fixed: false // 当前列是否固定
    }],
    tableData: [{...}], // 表格数据
}

#Table Events | 事件名 | 事件说明 | 参数 | 参数类型 | 参数说明 | | ------------- |:-------------| :-----|:-----|:-----| | updateTable | 更新列表数据 可用于新的设置提交 | newTitles |Object |修改后的表头数据 | | hiddenPanel | 关闭列表设置面板（自定义） | bool | Boolean | 面板隐藏/显示 |