vue插件之table自定义列

其实本人不大喜欢写帖子，奈何现在找个工作都要看论坛star数量，不扯远了，简单说下开发产品的时候遇到的需求：

系统中要嵌入一个文档管理模块，所有对表格的功能需求比较灵活，所有为了避免使用第三方插件时被功能局限住，就自己写了个table插件。

功能点需求介绍和预览：

1. 不同列的是否允许选择
2. 根据权限和类型-快捷操作列
3. 根据权限和类型-编辑列

   

写这个插件也走过一些弯路，如何让插件使用者自定列列？

关于table可以自定义列，一定不能污染table插件中的代码，所有只能写在业务代码中!!!

开始的时候我是想采用列配置的方式定义，比如：

 thead:[{
     title: "最近修改",
     template(row) {
      return DateFormate(row.lastUpdate, "yyyy-MM-dd hh:mm:ss");
    }
 }]

这个简单些的自定义看似没什么问题，但是后面遇到了复杂的功能比如：

thead:[{
     title: "编辑",
     align: "center",
     className: "editCol"
     template(row) {
       let editList=[
        { id: 1, label: "删除" },
        { id: 4, label: "重命名" },
        { id: 5, label: "关注" },
        { id: 6, label: "取消关注" },
        { id: 7, label: "权限设置" }
       ];
       <!--业务代码-->
       .......
       return(
         <div class="dropdown" >
        <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          <i class="icon icon-more"></i>
        </div>
        <ul class="dropdown-menu">
          <li class="dropdown-item">
            <a onclick="handleDelete()">删除</a>
            <a  onclick="handleStarr()">关注</a>
            <a  onclick="handlePower()">权限设置</a>
          .....
          </li>
        </ul>
      </div>
       )
    }
 }]

这样的写法太垃圾了了，要根据权限，文件类型等控制显示和事件。后决定使用vue的slot功能，只需要将写好的的vue模版插入近表格中，简直化腐朽为神奇：

主要利用：vue的slot有将数据返回的功能特点

引入vue模版

    import icons from "./components/icons";
    import dropdown from "./components/grid_dropdown";
    import lastUpdate from "./components/lastUpdate";

定义列插槽

 thead:[
     {
      title: "编辑",
      align: "center",
      className: "editCol"
      slot: "dropdown"
     }
    ...
 ]

嵌入table

 <r-Table
        :data="tableData"
        :head="thead"
        style="width:100%;height:100%"
        @dblclick="changeFolderView"
      >
        <template #icons="{row}">
          <icons :row="row" :power="power" :isAdmin="isAdmin" @handleClick="iconsClick"></icons>
        </template>
        <template #dropdown="{row}">
          <dropdown :row="row" :power="power" :isAdmin="isAdmin" @drop="dropDown"></dropdown>
        </template>
        <template #lastUpdate="{row}">{{DateFormate(row.lastUpdate, "yyyy-MM-dd hh:mm:ss")}}</template> 
  </r-Table>

table.vue中接收参数

 <div
    class="r_table_cell"
    :class="col.className"
    :style="{justifyContent:col.align}"
    v-else-if="col.slot"
  >
    <slot :name="col.slot" :row="row" :index="index"></slot>
  </div>

这样就完全可以自定义表格的列功能，不会受到任何功能的限制了！

其他基础的表格操作就不多做介绍的。

第一次分享，可能描述的不够好，希望大家有更好的方案可以分享围观下！