vue-table-set v1.1.2

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 item

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

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 | 面板隐藏/显示 |