项目库排序功能

fuliqi

2024-11-25 37a242d6192053d8b72954292d60300460d36eba

项目库排序功能

 src/components/VisibilityToolbar/index.vue

@@ -68,6 +68,7 @@
      table: false,
      currentPage: 1,
      columnRef: null,
      cpList: []
    };
  },
  props: {
@@ -123,7 +124,22 @@
      this.currentPage = page;
    },
    sortChange(row, val) {
      this.$emit('update:sort', { key: row.key, serialNumber: val });
      // // 创建一个新的columns数组，以避免直接修改原始数组
      // this.cpList = this.columns.map(item => ({ ...item })); // 使用解构来创建对象的浅拷贝
      //
      // // 更新指定项的serialNumber
      // this.cpList.forEach(item => {
      //   if (item.key ===  row.key) {
      //     item.serialNumber =  row.serialNumber;
      //   }
      // });
      //
      // // 根据serialNumber对newColumns进行排序
      // this.cpList = this.cpList.sort((a, b) => a.serialNumber - b.serialNumber);
      //
      // // 触发事件通知父组件columns已更新（如果父组件需要知道这个变化）
      // this.$emit('update:sort', this.cpList);
      this.$emit('update:sort', row);
    },
    resetSort() {
      this.$emit('update:resetSort');

 src/views/projectEngineering/projectLibrary/index.vue

@@ -189,6 +189,7 @@
    </el-form>

    <el-table
      :key="tableKey"
      ref="elTable"
      style="margin-top: 20px"
      v-loading="loading"
@@ -205,7 +206,6 @@
          v-if="item.visible"
          :prop="item.id"
          :label="item.label"
          v-bind="item"
          :min-width="item.minWidth"
        >
          <template slot-scope="scope">
@@ -324,6 +324,7 @@
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      tableKey: 0,
      open: false,
      timeRange: [],
      // 查询参数
@@ -353,7 +354,7 @@
          {required: true, message: "项目名称不能为空", trigger: "blur"}
        ],
        projectStatus: [
          {required: true, message: "项目状态  (0未开工，1已开工，2已竣工，3暂停)不能为空", trigger: "change"}
          {required: true, message: "项目状态不能为空", trigger: "change"}
        ],
      }
    };
@@ -402,17 +403,18 @@
        return item;
      });
    },
    handleUpdateSort(data) {
    handleUpdateSort(row) {
      console.log( this.columns, '排序前的列');
      this.columns = this.columns.map(item => {
        if (item.key === data.key) {
          item.serialNumber = data.serialNumber;
        if (item.key === row.key) {
          return row;
        }
        return item;
      });
      this.defaultColumns = JSON.parse(JSON.stringify(this.columns)).sort((a, b) => a.index - b.index);
      this.columns.sort((a, b) => a.serialNumber - b.serialNumber);

      //强制table渲染
      this.tableKey = this.tableKey +1;
      console.log( this.columns, '排序后的列');
    },
    // 关闭文件处理弹框的方法