Element UI 表格字段拖动排序/显示隐藏配置

效果

要实现的功能如下：

1. 可以拖动排序字段
2. 可以设置显示/隐藏某个字段
3. 可以恢复默认值

   思路

   首先 element ui 没有提供上述功能，要实现上面的功能，有一个关键点要解决：table-column 有自己的定制逻辑，如何渲染这些逻辑？

          <el-table-column
              label="最新跟进摘要"
              prop="latestFollowContent"
              width="300"
              show-overflow-tooltip>
            <template slot="header">
              最新跟进摘要
              <base-tooltip placement="top">未超过一天按小时/分钟/秒计算，超过一天按自然日计算</base-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button @click="toFollowContent(scope.row)" type="text">
                <span style="color: #343a40">{{ scope.row.latestFollowDate | latestFollowDateFormat }}</span>
                {{ scope.row.latestFollowContent }}
              </el-button>
            </template>
          </el-table-column>

   我使用了一个粗暴的方法，但是对于原来的写法影响不大，大概如下

   <template v-for="colum in tableColumns">
          <el-table-column
              :key="colum.prop"
              v-if="colum.prop === 'createdTime' && !colum.hidden"
              label="添加时间"
              prop="createdTime"
              width="135"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              :key="colum.prop"
              v-if="colum.prop === 'latestFollowContent' && !colum.hidden"
              label="最新跟进摘要"
              prop="latestFollowContent"
              width="300"
              show-overflow-tooltip>
            <template slot="header">
              最新跟进摘要
              <base-tooltip placement="top">未超过一天按小时/分钟/秒计算，超过一天按自然日计算</base-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button @click="toFollowContent(scope.row)" type="text">
                <span style="color: #343a40">{{ scope.row.latestFollowDate | latestFollowDateFormat }}</span>
                {{ scope.row.latestFollowContent }}
              </el-button>
            </template>
          </el-table-column>
   </template>

   对于 tableColumns 的数据结构就很简单了

   [
        { prop: 'customerNo', hidden: false, label: '客户编号' },
        { prop: 'createdTime', hidden: false, label: '添加时间' },
        { prop: 'latestFollowContent', hidden: false, label: '最新跟进摘要' },
        { prop: 'followCount', hidden: false, label: '跟进次数' },
        { prop: 'notFollowDayOfNewAdd', hidden: false, label: '新客未跟进' }
   ]

   代码实现

   核心逻辑组件实现

   TableColumnConfig.vue ```html

拖动组件使用的是[ Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)，这里有一个 [中文文档](https://www.itxst.com/vue-draggable/tutorial.html)
<a name="YeBLN"></a>
### 使用方如何使用？
通过按钮触发配置面板，使用 el-popover 组件
```html
<el-popover
            placement="left"
            width="400"
            trigger="click">
  <table-column-config v-model="tableConfigColumns"
                       :default-table-columns="defaultTableColumns"
                       @on-success="tableColumnsSave"></table-column-config>
  <el-button slot="reference" icon="el-icon-setting">列表字段配置</el-button>
</el-popover>

 data () {  
          /**
       * 默认配置
       */
      defaultTableColumns: [
        { prop: 'customerNo', hidden: false, label: '客户编号' },
        { prop: 'createdTime', hidden: false, label: '添加时间' },
        { prop: 'latestFollowContent', hidden: false, label: '最新跟进摘要' }
      ],
      // 表格中使用的配置
      tableColumns: [],
      // 传给组件的 配置
      // 为什么要和 tableColumns 分开？是因为数据实时变化的话，会导致表格渲染抖动，仅排序的情况下，表格还检测不到变更
      tableConfigColumns: []
}
created () {
    // 进入该页面的时候，就初始化配置
    this.initTableColumns()
}
methods:{
    /**
     * 初始化列表字段配置
     * 从 local 读取，如果没有，则使用默认值
     */
    initTableColumns () {
      // 配置从 localStorage 获取，保存的时候也保存在 localStorage 中
      const tableColumnsJson = window.localStorage.getItem('xx-customer/list-tableColumns')
      let finalTableColumnsJson
      if (tableColumnsJson) {
        finalTableColumnsJson = tableColumnsJson
      } else {
        finalTableColumnsJson = JSON.stringify(this.defaultTableColumns)
      }
      this.tableColumns = JSON.parse(finalTableColumnsJson)
      this.tableConfigColumns = JSON.parse(finalTableColumnsJson)
    },
    /**
     * 保存列表字段配置
     * @param tableColumns
     */
    tableColumnsSave (tableColumns) {
      const finalTableColumnsJson = JSON.stringify(tableColumns)
      window.localStorage.setItem('xx-customer/list-tableColumns', finalTableColumnsJson)
      // 解决赋值新的数组后，页面不变化（如果修改了显示隐藏，页面能检测到变化，仅排序检测不到）
      // 先赋值空数组
      this.tableColumns = []
      this.$nextTick(() => {
        // 等渲染后，再赋值保存的最新配置
        this.tableColumns = JSON.parse(finalTableColumnsJson)
        this.$nextTick(() => {
          // 等渲染后，调用表格的 重新布局函数，否则可能会导致表格错位
          this.$refs.table.doLayout()
        })
      })
    }
}

那么表格里面你就可以将需要控制的字段循环出来了

        <el-table-column
            fixed
            label="客户名称"
            prop="customerName"
            width="150"
            show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="toDetails(scope.row)" type="text">{{ scope.row.customerName }}</el-button>
          </template>
        </el-table-column>
                // 这里是需要控制字段的循环，只添加了 if 和 key
        <template v-for="colum in tableColumns">
          <el-table-column
              :key="colum.prop"
              v-if="colum.prop === 'customerNo' && !colum.hidden"
              label="客户编号"
              prop="customerNo"
              width="120"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              :key="colum.prop"
              v-if="colum.prop === 'latestFollowContent' && !colum.hidden"
              label="最新跟进摘要"
              prop="latestFollowContent"
              width="300"
              show-overflow-tooltip>
            <template slot="header">
              最新跟进摘要
              <base-tooltip placement="top">未超过一天按小时/分钟/秒计算，超过一天按自然日计算</base-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button @click="toFollowContent(scope.row)" type="text">
                <span style="color: #343a40">{{ scope.row.latestFollowDate | latestFollowDateFormat }}</span>
                {{ scope.row.latestFollowContent }}
              </el-button>
            </template>
          </el-table-column>
       </template>

进一步包装：初始化和存储也包装成组件

上面的代码，在使用的时候还需要使用方自己去实现 初始化 和 存储 的逻辑，那么完全可以将这两个也包装成组件，默认就使用 **_window_**.**localStorage** 进行存储

组件实现

基于 TableColumnConfig.vue 再包装一层 TableColumnConfigOfStore.vue

<template>
  <table-column-config v-model="tableColumns"
                       :default-table-columns="defaultTableColumns"
                       @on-success="tableColumnsSave">
  </table-column-config>
</template>
<script>
// 将配置存储在 本地的 window.localStorage 中
import TableColumnConfig from './TableColumnConfig'
export default {
  name: 'TableColumnConfigStore',
  components: {
    TableColumnConfig
  },
  props: {
    /**
     * 由于要存储在 localStorage 中，但是 localStorage 中是按域名来划分的
     * 所以需要外部传入一个唯一的 存储 key，以支持多个 表格使用该组件
     */
    storeKey: {
      type: String,
      required: true
    },
    /**
     * 默认配置
     */
    defaultTableColumns: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      tableColumns: undefined
    }
  },
  created () {
    this.initTableColumns()
  },
  methods: {
    /**
     * 初始化列表字段配置
     * 从 local 读取，如果没有，则使用默认值
     */
    initTableColumns () {
      const tableColumnsJson = window.localStorage.getItem(this.storeKey)
      let finalTableColumnsJson
      if (tableColumnsJson) {
        finalTableColumnsJson = tableColumnsJson
      } else {
        finalTableColumnsJson = JSON.stringify(this.defaultTableColumns)
      }
      this.tableColumns = JSON.parse(finalTableColumnsJson)
      this.tableConfigColumns = JSON.parse(finalTableColumnsJson)
      // 不要将应用属性传递给外部，否则会导致外部能事实的接受到数据的变更
      this.emitSuccess(JSON.parse(finalTableColumnsJson))
    },
    /**
     * 保存列表字段配置
     * @param tableColumns
     */
    tableColumnsSave (tableColumns) {
      const finalTableColumnsJson = JSON.stringify(tableColumns)
      window.localStorage.setItem(this.storeKey, finalTableColumnsJson)
      this.emitSuccess(JSON.parse(finalTableColumnsJson))
    },
    /**
     * 保存配置的时候将配置给出；
     * 原因：实时反馈的话，表格会抖动，配置完成后，再统一替换掉配置数组 体验较好
     */
    emitSuccess (tableColumns) {
      this.$emit('on-success', tableColumns)
    }
  }
}
</script>
<style scoped>
</style>

这里说下关键思路：这里简化了外部传入的逻辑，外部只需要传入 storeKey 和 defaultTableColumns 属性：

1. storeKey ：放在 localStorage 中的 key，一个项目中有多个表格，那么就有多个 key，防止他们数据覆盖
2. defaultTableColumns ：默认顺序的配置，由于在实践中，不推荐使用实时改变配置的方式，那么也就不需要外部通过 v-model 双向绑定数据了，首次渲染直接使用这个默认顺序，当用户修改配置之后，就会使用配置的顺序了

   使用方如何使用？

   <el-popover
            placement="left"
            width="400"
            trigger="click">
   <table-column-config-of-store
                                store-key="xxx-list-tableColumns"
                                :default-table-columns="defaultTableColumns"
                                @on-success="tableColumnsSave"></table-column-config-of-store>
   <el-button slot="reference" icon="el-icon-setting" style="margin-left: 10px">列表字段配置</el-button>
   </el-popover>

   定义的数据和方法

   data () {  
          /**
       * 默认配置
       */
      defaultTableColumns: [
        { prop: 'customerNo', hidden: false, label: '客户编号' },
        { prop: 'createdTime', hidden: false, label: '添加时间' },
        { prop: 'latestFollowContent', hidden: false, label: '最新跟进摘要' }
      ],
      // 表格中使用的配置
      tableColumns: []
   }
   created () {
   }
   methods:{
    /**
     * 将最新的用户配置给我们的表格使用
     * @param tableColumns
     */
    tableColumnsSave (tableColumns) {
      this.tableColumns = []
      this.$nextTick(() => {
        this.tableColumns = tableColumns
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      })
    }
   }

   对于表格中的循环渲染，并没有变化。 可以看到上述代码，在使用的时候大大简化了。

解决默认配置改变后，用户的配置无法加载新的字段

上面使用 localStorage 存储方式有一个缺点：当 localStorage 中有数据的时候，你项目更新了表格字段，那么就会导致新的字段不能显示在用户的配置中，要解决这个问题的话，稍微有点麻烦，笔者想到一种解决方式：

1. 新增一个配置的版本属性
2. 在初始化配置的时候，检查从 localStorage 中读取的版本号：如果匹配这继续使用用户的配置，如果不匹配则清空用户的配置，使用默认配置

功能实现

新增 prop 属性

    /**
     * 版本号：当用户配置的版本号与此版本号不匹配时，这清空用户的配置，使用默认配置
     */
    version: {
      type: String,
      required: true
    }

在初始化的时候执行版本检查

 if (tableColumnsJson) {
        finalTableColumnsJson = tableColumnsJson
        // 检查配置版本号
        const version = window.localStorage.getItem(this.storeKey + '_version')
        if (this.version !== version) {
          this.$message.warning('此表格字段配置以升级，已恢复成默认配置，如有需要请重新配置')
          finalTableColumnsJson = JSON.stringify(this.defaultTableColumns)
          window.localStorage.setItem(this.storeKey + '_version', this.version)
        }
 }

修改之后的完整组件代码

<template>
  <table-column-config v-model="tableColumns"
                       :default-table-columns="defaultTableColumns"
                       @on-success="tableColumnsSave">
  </table-column-config>
</template>
<script>
// 将配置存储在 本地的 window.localStorage 中
import TableColumnConfig from './TableColumnConfig'
export default {
  name: 'TableColumnConfigStore',
  components: {
    TableColumnConfig
  },
  props: {
    /**
     * 由于要存储在 localStorage 中，但是 localStorage 中是按域名来划分的
     * 所以需要外部传入一个唯一的 存储 key，以支持多个 表格使用该组件
     */
    storeKey: {
      type: String,
      required: true
    },
    /**
     * 默认配置
     */
    defaultTableColumns: {
      type: Array,
      required: true
    },
    /**
     * 版本号：当用户配置的版本号与此版本号不匹配时，这清空用户的配置，使用默认配置
     */
    version: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      tableColumns: undefined
    }
  },
  created () {
    this.initTableColumns()
  },
  methods: {
    /**
     * 初始化列表字段配置
     * 从 local 读取，如果没有，则使用默认值
     */
    initTableColumns () {
      const tableColumnsJson = window.localStorage.getItem(this.storeKey)
      let finalTableColumnsJson
      if (tableColumnsJson) {
        finalTableColumnsJson = tableColumnsJson
        // 检查配置版本号
        const version = window.localStorage.getItem(this.storeKey + '_version')
        if (this.version !== version) {
          this.$message.warning('此表格字段配置以升级，已恢复成默认配置，如有需要请重新配置')
          finalTableColumnsJson = JSON.stringify(this.defaultTableColumns)
          window.localStorage.setItem(this.storeKey + '_version', this.version)
        }
      } else {
        finalTableColumnsJson = JSON.stringify(this.defaultTableColumns)
      }
      this.tableColumns = JSON.parse(finalTableColumnsJson)
      this.tableConfigColumns = JSON.parse(finalTableColumnsJson)
      // 不要将应用属性传递给外部，否则会导致外部能事实的接受到数据的变更
      this.emitSuccess(JSON.parse(finalTableColumnsJson))
    },
    /**
     * 保存列表字段配置
     * @param tableColumns
     */
    tableColumnsSave (tableColumns) {
      const finalTableColumnsJson = JSON.stringify(tableColumns)
      window.localStorage.setItem(this.storeKey, finalTableColumnsJson)
      this.emitSuccess(JSON.parse(finalTableColumnsJson))
    },
    /**
     * 保存配置的时候将配置给出；
     * 原因：实时反馈的话，表格会抖动，配置完成后，再统一替换掉配置数组 体验较好
     */
    emitSuccess (tableColumns) {
      this.$emit('on-success', tableColumns)
    }
  }
}
</script>
<style scoped>
</style>

使用方如何使用？

这里其他的都没有变化，唯一的使用方需要传入一个 version

<el-popover
            placement="left"
            width="400"
            trigger="click">
  <table-column-config-of-store
                                version="1"
                                store-key="/clue/customer/list-tableColumns"
                                :default-table-columns="defaultTableColumns"
                                @on-success="tableColumnsSave"></table-column-config-of-store>
  <el-button slot="reference" icon="el-icon-setting" style="margin-left: 10px">列表字段配置</el-button>
</el-popover>

每次有默认配置更新的话（比如新增/删除了字段，字段名称变更等），就可以更改该版本号，以达到用户的配置与最新的配置同步