1.0.10 • Published 4 years ago
custom-table-controller v1.0.10
custom-table-controller
控制表格列数据的显示隐藏，以及基于Vue.Draggable实现列排序。
ScreenShot
Install
npm install custom-table-controllerAttributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| allProps | table所有列字段 | Array | [] |
| checkProps | table选中列字段 | Array | [] |
| propsLabelKey | table列名称字段 | String | label |
| propsValueKey | table列值字段 | String | value |
| width | 展开拖动列表宽度 | Number | 200 |
| height | 展开拖动列表高度 | Number | 300 |
| itemStyle | 展开拖动列表item的css样式 | Object | {} |
| activeColor | 选中item的颜色 | String | #409eff |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| updateCheckProps | 更新选中列 | 选中的 table 列数据 |
| updateAllProps | 更新所有列 | 排序后的table所有列数据 |
Slot
| name | 说明 |
|---|---|
| click-btn | 点击显示拖动列表的控件，默认 “设置齿轮icon” |
| active-icon | 拖动列表选中状态时，尾部的标志，默认 “√” |
| drag-icon | 拖动列表首部拖动图标，默认 “≡” |
| list-header | 拖动列表头部，默认“表头设置” & “X” 关闭按钮 |
Example
<template>
<div class="root">
<div class="table">
<table border>
<tr>
<th
v-for="(item,index) in checkProps"
:key="index">{{item.label}}</th>
</tr>
<tr v-for="(eachItem, eachIndex) in tableData" :key="eachIndex">
<td
v-for="(item,index) in checkProps"
:key="index">{{eachItem[item.value]}}</td>
</tr>
</table>
</div>
<div class="controller-icon">
<customTableController
@updateCheckProps="updateCheckProps"
@updateAllProps="updateAllProps"
:allProps="allProps"
></customTableController>
</div>
</div>
</template>
<script>
import customTableController from "./components/customTableController";
export default {
components: { customTableController },
data() {
return {
tableData: [
{
career: "boss",
buyNum: 100,
city: "上海",
dateOfBirth: "1996-04-06",
lastOrderTime: "2019-05-05",
firstOrderTime: "2019-05-05"
}
],
checkProps: [],
allProps: []
};
},
created() {
this.allProps = [
{ label: "职业", value: "career" },
{ label: "总购物次数", value: "buyNum" },
{ label: "所在地", value: "city" },
{ label: "生日", value: "dateOfBirth" },
{ label: "最近一次购物时间", value: "lastOrderTime" },
{ label: "第一次购物时间", value: "firstOrderTime" }
];
},
methods: {
updateCheckProps(checkProps) {
this.checkProps = checkProps;
},
updateAllProps(allProps) {
this.allProps = allProps;
}
}
};
</script>
<style>
.root {
display: flex;
flex-direction: column;
}
.table,
table {
width: 100%;
}
.table {
padding: 50px;
box-sizing: border-box;
}
.controller-icon {
margin: 0 auto;
}
</style>