需求: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>