Requirements: The Vue project uses the tables made by el-table. The front-end needs to sort the tables according to the specified conditions, and the back-end does not sort the tables.
The final effect diagram is as follows:
the data tableData of this table is requested by the front-end using the mixed writing method, and the back-end returns, but the data returned by the back-end is not returned to the front-end in the order of "selected to selected", and the front-end is processing sorting It is determined whether it is "selected" according to whether the current row of the table matches the specified id. Here, the form tableData returned by the backend is monitored in the watch, and then a deep copy of JSON.parse(JSON.stringify(newTable)) is performed. If the sorted form data is directly assigned to the tableData without deep copying, it may cause an infinite loop. Then the new variable tableDataShow is used to echo the form data. The complete code is as follows:
<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>