用户管理表格支持拖拽排序

zouyu

2026-04-20 e19cd654c14f000d7f77b2d23e016429678b1e58

 src/views/performance/competency/index.vue

@@ -46,6 +46,7 @@
      </el-form-item>
    </el-form>
    <el-table
      ref="competencyTable"
      v-if="refreshTable"
      v-loading="loading"
      :data="recordList"
@@ -127,12 +128,12 @@
      levelDictList:[],
      tableHeight:0,
      downloadLoading:false,
      postList:[]
      postList:[],
      layoutTimer: null
    };
  },
  created() {
    this.getLevelDict()
    this.getTableHeader();
    this.getList();
    this.getPostList()
    this.$nextTick(()=>{
@@ -141,11 +142,29 @@
  },
  mounted() {
    window.addEventListener("resize", this.getTableHeight);
    this.scheduleTableLayout()
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getTableHeight);
    if (this.layoutTimer) {
      clearTimeout(this.layoutTimer)
      this.layoutTimer = null
    }
  },
  methods: {
    scheduleTableLayout() {
      if (this.layoutTimer) {
        clearTimeout(this.layoutTimer)
      }
      this.layoutTimer = setTimeout(() => {
        this.$nextTick(() => {
          const table = this.$refs.competencyTable
          if (table && typeof table.doLayout === 'function') {
            table.doLayout()
          }
        })
      }, 0)
    },
    getPostList(){
      optionSelect().then(res=>{
        if(res.code===200){
@@ -171,6 +190,7 @@
      const innerHeight = window.innerHeight;
      const otherHeight = 50+46+40+51;
      this.tableHeight = innerHeight - otherHeight;
      this.scheduleTableLayout()
    },
    changeSkillLevel(row, itemId){
      const configObj = {...row[itemId]}
@@ -196,20 +216,25 @@
    getTableHeader() {
      listConfig({ isEnable: true }).then((response) => {
        this.tableHeaderList = this.handleTree(response.data, "id");
        this.scheduleTableLayout()
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      this.getTableHeader();
      getPageList(this.queryParams).then(res=>{
        if(res.code===200){
          this.recordList = res.data
      Promise.all([
        listConfig({ isEnable: true }),
        getPageList(this.queryParams)
      ]).then(([headerRes, listRes]) => {
        this.tableHeaderList = this.handleTree(headerRes.data, "id");
        if(listRes.code===200){
          this.recordList = listRes.data
        }
      }).catch(error=>{
        console.log(error)
      }).finally(() => {
          this.loading = false;
          this.scheduleTableLayout()
        });
    },
    /** 搜索按钮操作 */