Vue IView Table 按照数据默认勾选,分页之后也不会消失
<Modal v-model="isParams" footer-hide title="参数" width="800">
<Table
ref="table"
:columns="columnsParam"
:data="listParam"
:show-header="true"
@on-select="selectInfo"
@on-select-cancel="selectCancel"
@on-select-all="selectInfo"
></Table>
<Page
v-show="pageParam.pageSize < pageParam.total"
:current="pageParam.current"
:total="pageParam.total"
:page-size="pageParam.pageSize"
@on-change="handlerPageParam"
@on-page-size-change="pageSizeChangeParam"
show-sizer
show-total
style="text-align: center"
/>
</Modal>
<script>
import {
save,findColumns
} from "@/api/selectPage";
export default {
name: "",
data() {
return {
columnsParam: [
{
type: "index",
width: 60,
align: "center",
},
{
type: "selection",
width: 60,
align: "center",
},
{
title: "名称",
key: "name",
align: "center",
},
{
title: "备注",
key: "remark",
align: "center",
},
],
isParams:fasle
loading:false,
listParam: [],
pageParam: {
total: 0,
current: 1,
pageSize: 10,
needPaging: true,
},
paramName: "",
name: "",
dataName: [],
temporaryList: [],
params:[],
};
},
methods: {
//初始化数据,获得是否有选中的数据,赋值给params
getData(id){
},
//显示model
showModel(){
this.isParams = true;
this.findParam();
}
//查询table数据
findParam() {
this.loading = true;
let params = {
...this.pageParam,
name: this.paramName,
};
findColumns(params).then((res) => {
this.pageParam = res.page;
this.listParam = res.result;
this.temporaryList = this.temporaryList.concat(res.result);
this.$nextTick(() => {
this.setChecked();
});
this.loading = false;
});
},
//初始化选中事件
setChecked() {
this.params.map((item) => {
for (let index in this.$refs.table.objData) {
if (item == this.$refs.table.objData[index].id) {
this.selectList.push(this.$refs.table.objData[index]);
this.$refs.table.objData[index]._isChecked = true;
}
}
});
},
//分页
handlerPageParam(page) {
this.pageParam.current = page;
this.$nextTick(() => {
this.findParam();
});
},
pageSizeChangeParam(pageSize) {
this.pageParam.pageSize = pageSize;
this.$nextTick(() => {
this.findParam();
});
},
selectParams() {
this.pageParam.current = 1;
this.$nextTick(() => {
this.findParam();
});
},
//选中,全选
selectInfo(selection) {
//获取当前页面已被勾选的数据
const tempList = this.$refs.table.getSelection();
//添加进数组
for (let index in tempList) {
this.params.push(tempList[index].id);
this.selectList.push(tempList[index]);
this.dataName.push(tempList[index].name);
}
//去重复(数据结构为["1","2","3"])
let r = this.form.params.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
let names = this.dataName.filter(function (element, index, self) {
return self.indexOf(element) === index;
});
this.params = r;
this.dataName = names;
this.selectContent = names.join();//获取name数组,变为字符串按照,分开
},
//取消
selectCancel(selection, row) {
//按照取消的对象获取id,删除数组中的对象
this.params.splice(this.params.indexOf(row.id), 1);
this.dataName.splice(this.dataName.indexOf(row.name), 1);
this.selectContent = this.dataName.join();
},
selectInfoAllCancel(selection, row) {
this.params = [];
this.dataName = [];
this.selectContent = "";
},
},
created() {
},
};
</script>