el-table自定义排序

需求：Vue项目用到了el-table做的表格，需要前端根据指定条件去排序表格，后端没有进行排序。
最终效果图如下：

这个表格的数据tableData是前端用混入的写法发请求，后端返回的，但后端返回的数据不是按照“已选择到选择”这样的排列顺序返给前端，前端在处理排序是根据表格当前行与指定的id是否匹配来确定是不是"已选择"。这里在watch里监听后端返给的表单tableData,然后进行了深拷贝JSON.parse(JSON.stringify(newTable))，如果不深拷贝直接将排序后的表单数据赋值给tableData可能造成死循环。然后回显表单数据用到了新的变量tableDataShow。完整代码如下：

<template>
  <div>
    <el-input
      v-model="queryParams.placeName"
      style="margin:1rem 0"
      placeholder="请输入场所名称"
      @keyup.enter.native="getTableData(pager, queryParams)"
    ></el-input>
    <el-table
      :data="tableDataShow"
      :header-cell-style="{
        background: ' #eff3fb',
        color: '#3c4353',
        'font-weight': 600
      }"
      border
      style="width: 100%;"
    >
      <el-table-column prop="placeName" label="场所名称" align="center">
      </el-table-column>
      <el-table-column prop="placeAddress" label="场所地址" align="center">
      </el-table-column>
      <el-table-column prop="placeTypeName" label="场所类型" align="center">
      </el-table-column>
      <el-table-column prop="placeTagName" label="标签" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="80" align="center">
        <template slot-scope="scope">
          <span
            v-if="rowFormGet.docId && rowFormGet.docId == scope.row.id"
            style="color:#aaaaaa"
            >已选择</span
          >
          <span
            style="color:#108ee9;cursor: pointer;"
            @click="handleClick(scope.row)"
            v-else
            >选择</span
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="paginatBox">
      <el-pagination
        background
        @size-change="changePageSize"
        @current-change="changePage"
        :current-page="pager.currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.totalList"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getPlaceList, formConnectDoc } from "@/api/resource.js";
import tableMixin from "@/views/tableMixin";
export default {
  mixins: [tableMixin],
  props: {
    rowFormGet: {
      type: Object,
      default: {}
    },
    MyArr: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      apiAddress: getPlaceList,

      queryParams: {
        placeName: ""
      },
      tableDataShow: []
    };
  },
  watch: {
    tableData: {
      handler(newTable, oldTable) {
        // console.log("table变化", newTable, oldTable);
        let arr = JSON.parse(JSON.stringify(newTable));
        if (Array.isArray(arr) && arr.length > 0) {
          arr.sort((a, b) => {
            if (
              a.id == this.rowFormGet.docId &&
              b.id != this.rowFormGet.docId
            ) {
              return -1;
            } else if (
              a.id != this.rowFormGet.docId &&
              b.id == this.rowFormGet.docId
            ) {
              return 1;
            } else {
              return 0;
            }
          });

          this.tableDataShow = arr;
          // console.log("排序后的table", arr, this.tableDataShow);
        }
      },
      immediate: true
    }
  },
  created() {
    // console.log("placefiles", this.rowFormGet, this.MyArr);
  },
  methods: {
    handleClick(row) {
      this.$confirm(`确定将表单关联到${row.placeName}档案吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let str = "";
          if (this.MyArr.length > 0) {
            this.MyArr.forEach(item => {
              str = item.id + "," + str;
            });
          }

          let params = {
            id: this.MyArr.length > 0 ? str : this.rowFormGet.id,
            docId: row.id,
            docType: "1"
          };
          formConnectDoc(params)
            .then(res => {
              this.$message({
                type: "success",
                message: "关联成功!"
              });
              this.$emit("myCancel");
            })
            .catch(err => {});
        })
        .catch(() => {});
    }
   
  }
};
</script>

<style lang="less" scoped>
.paginatBox {
  width: 100%;
  margin: 1.5rem auto;
}
</style>