custom-table-controller

控制表格列数据的显示隐藏，以及基于Vue.Draggable实现列排序。

github：https://github.com/mlzhuo/custom-table-controller

ScreenShot

Install

npm install custom-table-controller

Attributes

| 参数 | 说明 | 类型 | 默认值 | | :-----------: | :-----------------------: | :----: | :------: | | 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>