elementui 树形控件分页组件

最新推荐文章于 2024-05-08 16:42:58 发布

New_leng

最新推荐文章于 2024-05-08 16:42:58 发布

阅读量1k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/New_leng/article/details/126869768

版权

子组件 tree.vue

<template>
  <div>
    <el-tree
      :props="defaultProps"
      :data="treeData"
      node-key="id"
      ref="tree"
      show-checkbox
      @check="check"
       @check-change="treeCheckChange"
      default-expand-all
    >
    </el-tree>
     <div style="text-align:right">
            <span
              @click="prePage"
              v-show="pagination.page !== 1"
              style="color:#409eff;margin-right:40px;user-select: none;"
            >
              上一页
            </span>
            <span
              @click="nextPage"
              v-show="pagination.page * pagination.pagesize < this.data.length"
              style="color:#409eff;user-select: none;"
            >
              下一页
            </span>
          </div>
  </div>
</template>

<script>
export default {
  props:{
    data:Array
  },
  data() {
    return {
       defaultProps: {
        children: "book",
        label: "label",
      },
       pagination: {
        page: 1,
        pagesize: 5,
      },
    };
  },
  created () {
  },
  computed: {
    treeData() {
      return [
        {
          id: "*-1",
          label: "全部",
          book: this.data.slice(
            (this.pagination.page - 1) * this.pagination.pagesize,
            this.pagination.page * this.pagination.pagesize
          ),
        },
      ];
    },
    
  },
  methods: {
      treeCheckChange(item, isCheck) {
         const checkedNodes = this.$refs.tree.getCheckedNodes() 
            // item.checked = isCheck
            // console.log(isCheck)
            // console.log(item.checked)
            this.$emit('check-change',item,isCheck,checkedNodes)
        },
    //当复选框被点击的时候触发
    check(a, b, c) {
     this.$emit('check',a,b,c)
     console.log(this.treeData)
    },
     //数形控件上一页
    prePage() {
      if (this.pagination.page > 1) {
        this.pagination.page--;
      }
    },
    //树形控件下一页
    nextPage() {
      if (this.pagination.page * this.pagination.pagesize < this.data.length) {
        this.pagination.page++;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>

父组件调用

<template>
  <div>
  
          <tree
            ref="tree"
            :data="data"
            @check-change="treeCheckChange"
            @check="check"></tree>
         
  </div>
</template>

<script>

import tree from "../../components/tree.vue";
export default {
  components: { tree },
  data() {
    return {
     
      data: [],
        arr:[],
     
  },
  created() {
    this.getInfo();
  },
  methods: {
    

    //获取期刊数列
    getTreeData() {
      let type = 1;
      book_aggregate(type).then((res) => {
        if (res.msg == "成功") {
          if (res.data.length == 0) {
            console.log("没有数据");
            this.dialogVisible = false;
            this.$message.error("没有需要印刷的刊物");
          } else {
            this.dialogVisible = true;
            res.data.map((item) => {
              item.label = item.title;
              item.disabled = false;
              item.id = "*" + item.id;
              if (item.book.length != 0) {
                item.book.map((i) => {
                  i.label = i.subtitle;
                  i.disabled = false;
                  i.id = i.book_id + "";
                });
              }
            });
            this.data = res.data;
          }

          console.log(this.data);
        }
      });
    },

   

    //当复选框被点击的时候触发
    check(a, b, c) {
      if (b.checkedKeys.length != 0) {
        this.arr = this.removeStr(b.checkedKeys, "*");
        console.log(this.arr);
      }
    },
    treeCheckChange(item, isCheck, checkedNodes) {
    
      item.checked = isCheck;
    
    },

   
   

};
</script>

<style lang="scss" scoped>

</style>