基于el-table的动态配置表格列

思路：首先封装JSON文件设置表头信息可以直接写在文件里,通过自定义一个字段控制是否展示。我这里是=2就不展示，0就是展示，使用文件页面遍历数组做为表头数据

  "gasCompanyCol": [
    {
      "prop": "companyIndex",
      "label": "序号",
      "width": "80",
      "formatter": null,
      "align": "center",
      "toolTip": true,
      "noWrap": true,
      "overFlowHidden": true,
      "fixed": true,
      "sfxz":"2"
    },
    {
      "prop": "gsbhData",
      "label": "公司编号",
      "sortable": true,
      "minWidth": "120",
      "formatter": null,
      "align": "center",
      "toolTip": true,
      "showFilter":"gsbh",
      "noWrap": true,
      "overFlowHidden": true,
      "sfxz":"0"
    }]

配合后端拿到当前用户默认展示列信息，遍历接口数据和本地数据做对比，将默认展示的序号以及一些字段添加进去，最后处理好的表头在页面遍历，

// // 获取配置列

const getConfigArrange = async () => {

  const query = {

    lx: '1'

  }

  const res = await _this.$http.get(

    '//interface/Arrange.jsp',

    query

  )

  if (res.length > 0) {

    const newColConfig = []

    const tempObj = {}

    colData.gasCompanyCol.forEach((item, ind) => {

      tempObj[item.prop] = item

      res.forEach((val, index) => {

        if (val.zdm === item.prop) {

          item.sfxz = val.sfxz

          item.id = val.id

          item.pxh = val.pxh

        }

        newColConfig[index] = tempObj[val.zdm]

      })

    })

    const xh = {

      prop: 'companyIndex',

      label: '公司序号',

      width: '80',

      formatter: null,

      align: 'center',

      toolTip: true,

      noWrap: true,

      overFlowHidden: true,

      fixed: true,

      sfxz: '2'

    }

    newColConfig.unshift(xh)

    newList.value = newColConfig

    // console.log(newColConfig)

    return newColConfig

  }

}

 遍历表头

  <template v-for="(item, index) in colList">
        <el-table-column
          :key="index"
          :align="item.align"
          :label="item.label"
          :min-width="item.minWidth"
          :prop="item.prop"
          :sortable="!!item.sortable && sortFlag && 'custom'"
          :width="item.width"
          :fixed="item.fixed"
          :filters="item.showFilter ? toShowFilter(item) : ''"
          :column-key="item.showFilter"
          v-if="item.sfxz === '0' || item.sfxz === '2' || isNoUseConfig"
        >
          <template #default="{ $index, row }">

 通过拖拽改变当前排序位置，保存给后端再刷新表格