动态表格的表头

 

//循环出来的表头        
<el-table-column :min-width="item.width" v-for="(item,index) in headerData" :key="index" :label="item.name"
          :prop="item.code" align="center" show-overflow-tooltip>
        </el-table-column>
        //固定表头 点击出现操作的表头的弹窗
        <el-table-column align="center" label="操作" width="180" fixed="right">
           //操作后面的按钮
          <template slot="header" class="operation">
            <span style="line-height: 32px;">操作</span>
            <el-tooltip class="item" effect="dark" content="字段展示" placement="top">
              <el-popover popper-class="popperOptions" ref="popoverRef" placement="bottom" trigger="manual"
                v-model="visible">
                <!-- <p>字段展示</p> -->
                <!-- <el-input placeholder="搜索字段" suffix-icon="el-icon-search" v-model="input1">
                </el-input> -->
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">
                  全选{{checkData.length}}/{{selectData.length}}
                </el-checkbox>
                <el-checkbox-group v-model="checkData" @change="handleCheckedValChange">
                  <draggable @end="onDragEnd" class="checkboxGroup">
                    <el-checkbox v-for="item in selectData" :label="item" :key="item.id">
                      {{item.name}}
                    </el-checkbox>
                  </draggable>
                </el-checkbox-group>
                <i slot="reference" class="operatingButton" @click.stop="sortClick"></i>
              </el-popover>
            </el-tooltip>
          </template>
        //操作单元格的按钮
          <template slot-scope="scope">
            <div class="operation-box" v-if="routeName==='interior'">
              <el-tooltip class="" effect="dark" content="设置部门" placement="top">
                <i class="set" @click="setGroup(scope.row)"></i>
              </el-tooltip>
              <el-tooltip class="" effect="dark" content="导出" placement="top">
                <i class="export" @click="exportPerson(scope.row)"></i>
              </el-tooltip>
              <el-tooltip class="" effect="dark" content="删除" placement="top">
                <i class="delete" @click="deletePerson(scope.row)"></i>
              </el-tooltip>
            </div>
            <div class="operation-box" v-else>
              <el-tooltip class="" effect="dark" content="设置职位" placement="top">
                <i class="set" @click="setPosition(scope.row)"></i>
              </el-tooltip>
              <el-tooltip class="" effect="dark" content="导出" placement="top">
                <i class="export" @click="exportPerson(scope.row)"></i>
              </el-tooltip>
              <el-tooltip class="" effect="dark" content="删除" placement="top">
                <i class="delete" @click="deletePerson(scope.row)"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

  // 页面重新渲染
    renderPage() {
      this.$nextTick(el => {
        this.$refs.contentData.doLayout();
      })
    },
    // 打开字段展示
    sortClick() {
      this.visible = !this.visible
      this.queryTableField()
    },
    // 字段展示排序拖拽排序
    async onDragEnd({ oldIndex, newIndex }) {
      let sort = 0
      let diff = Math.abs(newIndex - oldIndex)//插值绝对值
      let index = this.selectData[oldIndex]
      if (eval(oldIndex) > eval(newIndex)) {
        for (let i = 0; i < diff; i++) {
          this.selectData[oldIndex - i] = this.selectData[oldIndex - i - 1]
        }
        this.selectData[newIndex] = index
      } else {
        for (let i = 0; i < diff; i++) {
          this.selectData[oldIndex + i] = this.selectData[oldIndex + i + 1]
        }
        this.selectData[newIndex] = index
      }
      this.selectData.forEach(item => {
        sort++
        this.$set(item, 'sort', sort)
      })
      await this.updateTableField()
    },
    // 获取展示数据
    async queryTableField() {
      let type
      if (this.routeName === 'interior') {
        type = 1
      }
      if (this.routeName === 'outside') {
        type = 2
      }
      let arr = []
      const { result, success } = await this.$http.INTERIOR.queryTableField({
        tableType: type
      })
      if (success) {
        result.forEach(item => {
          if (item.isShow) {
            if (item.code === "idCardNo" || item.code === "email") {
              this.$set(item, 'width', '190')
            } else if (item.code === "phone" || item.code === "nativePlace") {
              this.$set(item, 'width', '140')
            } else {
              this.$set(item, 'width', '110')
            }
            arr.push(item)
          }
          this.$set(item, 'companyCode', localStorage.getItem('selectCompanyCode'))
          this.$set(item, 'groupCode', localStorage.getItem('selectGroupCode'))
        })
        this.selectData = result
        this.checkData = arr
        this.headerData = arr
        if (this.checkData.length) {
          let flag = this.selectData.every(item => {
            return item.isShow === 1
          })
          if (flag) {
            this.isIndeterminate = false
            this.checkAll = flag
          } else {
            this.isIndeterminate = true
            this.checkAll = flag
          }
          console.log(flag, 'flag');
        }
      }
    },
    // 操作展示数据
    async updateTableField() {
      let arr = []
      const { result, success } = await this.$http.INTERIOR.updateTableField(this.selectData)
      if (success) {
        await this.queryTableField()
      }
    },
    // 字段展示全选
    handleCheckAllChange(val) {
      let arr = []
      this.selectData.forEach(item => {
        if (val) {
          this.$set(item, 'isShow', 1)
          arr.push(item)
        } else {
          this.$set(item, 'isShow', 0)
        }
      })
      this.checkData = val ? arr : [];
      this.isIndeterminate = false
      this.renderPage()
      this.updateTableField()
    },
    // 字段展示单选
    handleCheckedValChange(value) {
      let filterArr = []
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.selectData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.selectData.length;
      const getData = (arr1, arr2) => {
        return arr1.concat(arr2).filter((v, i, arr3) => {
          return arr3.indexOf(v) === arr3.lastIndexOf(v)
        })
      }
      filterArr = getData(this.checkData, this.selectData)
      console.log(filterArr, 'filterArrfilterArr');
      this.selectData.forEach(item => {
        this.$set(item, 'isShow', 1)
        if (filterArr.length) {
          filterArr.forEach(item1 => {
            if (item.name === item1.name) {
              item.isShow = 0
            }
          })
        }
      })
      this.renderPage()
      this.updateTableField()
    },