业务需求

• antd vue table 表头需要有部分固定字段和部分动态字段，动态字段可以调整显示隐藏和控制顺序。

效果展示

代码实现

<-- 弹窗部分代码 -->
<a-popover :getPopupContainer="getContainer" trigger="click" placement="bottomRight">
	<template slot="title">
		<div class="pop-title">
			<div>自定义显示列</div>
			<a-popconfirm
			  title="确定要重置表头吗？"
			  ok-text="确定"
			  cancel-text="取消"
			  @confirm="resetColumnsClick"
			>
				<div class="pop-reset">重置</div>
			</a-popconfirm>
		</div>
	</template>
	<template slot="content">
		<div class="setting-model">
			<-- 使用vueDraggable组件实现拖动切换顺序效果 -->
			<VueDraggable
				v-model="common.setColumns"
				@start="drag = true"
				@end="drag = false"
				:move="onMove"
				handle=".dargBtn"
				filter=".undraggable"
			>
				<div
				class="setting-item"
				:class="element.isDisabled ? 'undraggable' : 'dargBtn'"
				v-for="(element, index) in common.setColumns"
				:key="index">
					<a-icon type="menu" style="margin-right: 10px;"/>
					<a-checkbox v-model="element.isShow" :disabled="element.isDisabled">
						{{ element.title }}
					</a-checkbox>
				</div>
			</VueDraggable>
		</div>
	</template>
	<div class="icon-button" @click.prevent>
		<a-icon type="setting" :style="{fontSize: '18px', color: '#333'}"/>
	</div>
</a-popover>

<a-table
	ref="table"
	bordered
	size="small"
	:columns="columns"
	:dataSource="common.tableData"
	:rowKey="(record,index) => index"
	:loading="common.searchLoading"
	:pagination="common.pagination"
	:scroll="{ x: scrollWidth }"
	@change="handleTableChange"
>
</a-table>

监听表头配置文件变化

  // 监听columns
  watch: {
    'common.setColumns': {
      handler (newVal) {
      	// 将表头配置项添加缓存并做好function处理（也可调用后台接口保存）
        localStorage.setItem('order-storage-columns', JSON.stringify(newVal, (key, val) => {
          if (typeof val === 'function') {
            return val + ''
          }
          return val
        }))
        this.scrollWidth = 0 // 表格可滚动区域宽度
        this.columns = newVal.filter(item => { // 表头配置
          if (item.isShow) {
            item.width ? this.scrollWidth += item.width : this.scrollWidth += 120
          }
          return item.isShow
        })
        this.columns.forEach((item, index) => { // 配置表头显示的字段
          if (index > 4) {
            this.columns.length <= 10 ? (item.isDisabled = true) : (item.isDisabled = false)
          }
        })
        this.checkAllColumns = this.columns.length === newVal.length // 全选状态
        this.indeterminate = this.columns.length !== newVal.length && (this.columns.length > 0) // 部分选中状态
      },
      deep: true,
      immediate: true
    }
  }

默认表头配置文件

  /**
   * 表头字段
   * @type{Array}
   */
  storageColumns = localStorage.getItem('order-storage-columns')
  defaultColumns = [
    {
      title: '字段1',
      dataIndex: 'sourceOrderNo',
      scopedSlots: { customRender: 'sourceOrderNo' },
      align: 'center',
      width: 180,
      fixed: 'left',
      ellipsis: 'true',
      isShow: true,
      isDisabled: true
    },
    {
      title: '字段2',
      dataIndex: 'origWarehouse',
      align: 'center',
      width: 120,
      ellipsis: 'true',
      isShow: true
    }，
    // ...
  ]
  setColumns = this.storageColumns ? JSON.parse(this.storageColumns, (k, v) => {
    const evil = (fn) => {
      const Fn = Function
      return new Fn('return ' + fn)()
    }
    if (v.indexOf && v.indexOf('function') > -1) {
      return evil('(function(){return ' + v + '})()')
    }
    return v
  }) : this.defaultColumns