Vue IView Table 按照数据默认勾选,分页之后也不会消失

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>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 7
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值