el-table实现自定义表格头部展示项

// 可拖拽组件是vuedraggable 自行百度下载 有不懂的可留言或私信
<el-table border stripe :data="list" :height="tableHeight" :columns="tableColumns">
  <template slot-scope="scope">  
    <el-table-column label="序号" type="index" align="center" width="80">
      <template slot-scope="scope">{{ (listQuery.pageNum - 1) * listQuery.pageSize + scope.$index + 1 }}</template>
    </el-table-column>
    <template v-for="(column, index) in tableColumns">
      <el-table-column v-if="column.isChecked === true" :key="index" :prop="column.prop" :label="column.label">  
        <template slot-scope="scope">
          <span v-if="column.prop === 'projectName'">
            <el-link type="primary" @click="handleAudit(scope.row)">{{ scope.row.projectName }}</el-link>
          </span>
          <span v-else-if="column.prop === 'status'">  
            <span v-if="scope.row.dataVersion == 'two'"></span>
            <span v-else>
              <span v-if="scope.row.supervisionStatus == '1' && scope.row.status == '17'">整改办结</span>
              <span v-else>{{ projectStatusFormatter(scope.row) }}</span>
            </span>
          </span>
          <span v-else-if="column.prop === 'projectType'">
            {{ projectTypeFormatter(scope.row.projectType) }}
          </span>
          <span v-else-if="column.prop === 'auditType'">
            {{ auditTypeFormatter(scope.row.auditType) }}
          </span>
          <span v-else-if="column.prop === 'auditTypeSasac'">
            {{ auditTypeSasacFormatter(scope.row.auditTypeSasac) }}
          </span>
          <span v-else-if="column.prop === 'projectClassification'">
            {{ projectClassificationFormatter(scope.row.projectClassification) }}
          </span>
          <span v-else-if="column.prop === 'carryOut'">  
            <el-tag :type="scope.row.carryOut === '是' ? 'success' : 'info'">{{ scope.row.carryOut === '是' ? '是' : '否' }}</el-tag>
          </span>
          <span v-else>  
            {{ scope.row[column.prop] }}  
          </span>  
        </template>  
      </el-table-column>
    </template>
    <el-table-column label="操作" align="center">
    </el-table-column>
  </template>
</el-table>


// 弹框可排序 可勾选
<div class="pop-absolute2">
  <el-popover
  ref="tablePopover"
  placement="left"
  width="512"
  popper-class="pop-search"
  trigger="click">
    <div class="con-padding" v-loading="loading">
      <div class="con-header">
        <div class="index-title"><img :src="require('@/assets/images/distribution-circle.png')" class="distribution-circle">配置检索项</div>
        <i class="el-icon-close" style="cursor: pointer;" @click="closePopover()"></i>
      </div>
      <draggable v-model="searchList" :animation="200" :ghost-class="'ghost'" class="pop-box">
        <div class="pop-block" v-for="(item, index) in searchList" :key="item.num">
          <div class="pop-con">
            <i class="el-icon-rank"></i>
            <div class="pop-right ml-10" :class="{'checked': item.isChecked}" @click="handleSelect(index, item)">{{ item.label }}</div>
            <div :class="{'right-icon': item.isChecked}"></div>
          </div>
        </div>
      </draggable>
      <div class="float-right mt-20">
        <el-button @click="handleTableReset()">恢复默认</el-button>
        <el-button type="primary" @click="handleSave('table')">保存</el-button>
        <el-button @click="closeTablePopover()">取消</el-button>
      </div>
    </div>
    <svg-icon icon-class="set" class-name="set-icon" slot="reference" @click="handleTriggerClickTable" />
  </el-popover>
</div>
import Draggable from 'vuedraggable'
components: {
  Draggable
}
tableColumns: [{   // 表格默认头部
  num: '1',
  label: '项目名称',
  prop: 'projectName',
  type: 'input',
  isChecked: true
},{
  num: '11',
  label: '审计类型',
  prop: 'auditType',
  options: [],
  dictName: 'audit_type',
  type: 'select',
  isChecked: true
},{
  num: '4',
  label: '项目负责人',
  prop: 'projectLeader',
  type: 'input',
  isChecked: true,
  formKey: 'auditProjectZero'
},{
  num: '5',
  label: '审计单位',
  prop: 'auditCompanyName',
  type: 'input',
  isChecked: true
},{
  num: '7',
  label: '被审计单位',
  prop: 'auditeeName',
  type: 'input',
  isChecked: true
},{
  num: '13',
  label: '渉审金额（万元）',
  prop: 'wadeOnTheAmountOf',
  type: 'number',
  isChecked: true,
  formKey: 'auditProjectZero'
},{
  num: '15',
  label: '核减金额（万元）',
  prop: 'subtractTheAmountOf',
  type: 'number',
  isChecked: true,
  formKey: 'auditProjectZero'
},{
  num: '2',
  label: '问题个数',
  prop: 'questionNumber',
  type: 'input',
  isChecked: true,
  formKey: 'auditProjectZero'
}],
searchHeaderList: [{  // 默认筛选项 自行定义内容
  num: '1',
  label: '项目名称',
  prop: 'projectName',
  type: 'input',
  isChecked: true
},{
  num: '11',
  label: '审计类型',
  prop: 'auditType',
  options: [],
  dictName: 'audit_type',
  type: 'select',
  isChecked: true
},{
  num: '5',
  label: '审计单位',
  prop: 'auditCompanyName',
  type: 'input',
  isChecked: true
}]


// 查询表格自定义头部
getSearchTableList({
  formKey: '',
  tableType: '',
  pageNum: 1,
  pageSize: 50
}).then(response => {
  const { data } = response
  const arr = deepClone(this.tableColumns)
  this.tableColumns = data && Object.keys(data).length > 0 ? data : arr
  this.tableColumns.forEach(row => {
    row.isChecked = JSON.parse(row.isChecked)
  })
})

// 打开弹框做的处理
handleTriggerClickTable() {
  this.loading = false
  this.searchList = this.$options.data().searchList

  if(this.searchList.length === this.tableColumns.length) {
    this.searchList = deepClone(this.tableColumns)
  }else{
    this.searchList.map(item => {
      this.tableColumns.forEach(row => {
        if(row.prop === item.prop) {
          item.isChecked = true
        }
      })
    })
  }
}
// 取消按钮
closeTablePopover()  {
  this.$refs.tablePopover.doClose()
},
// 恢复默认
handleTableReset()  {
  this.handleTriggerClickTable()
}
// 点击方法
handleSelect(index, data) {
  if(data.isChecked === false) {
    this.searchList[index].isChecked = true
  }else{
    this.searchList[index].isChecked = false
  }
}
// 保存方法
handleSave(type) {
  this.loading = true
  const params = {
    list: this.searchList
  }

  addSearchTableList(params).then(response => {
    this.init()
    this.closeTablePopover()
    this.$message.success('配置检索项成功!')
    this.loading = false
  })
}