vue element tree树形

 

 

<template>
  <div class="app-container">
    <el-card  class="filter-container"  shadow="never">
      <el-tree
        :data="servcieCategoryData"
        style="margin-bottom: 20px"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        :check-strictly="isCheck"
        highlight-current
        :default-checked-keys="categoryIdList"
        :props="{ label: getServcieCategoryName }"
      >
        <!--   :check-strictly="true" // check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
        <!-- <span class="custom-tree-node" slot-scope="{ node, data }">
          <span style="">{{ node.label }}</span>

          <span style="">
            {{ data.menu.href }}
          </span>
        </span> -->
      </el-tree>
      <el-button
        style="margin-left: 50px"
        :loading="loading"
        type="primary"
        @click="saveData()"
        >保存</el-button
      >
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  components: {},
  props: {
    serviceProviderId: {
      type: Number,
      default: null,
    },
  },
  filters: {},
  data() {
    var validatePass = (rule, value, callback) => {
      callback();
    };
    return {
      loading: false,
      isCheck: true,
      getServcieCategoryDataUrl: "/serviceCategory/list/withChildren",
      servcieCategoryData: [],
      listCategoryIdByProviderIdUrl:
        "/service/serviceProviderCategory/listCategoryIdByProviderId",
      categoryIdList: [],
      saveProviderCategoryIdsUrl:
        "/service/serviceProviderCategory/saveProviderCategoryIds",
    };
  },
  created() {
    this.getServcieCategoryData();

    this.getCategoryIdList();
  },
  methods: {
    getServcieCategoryName(data, node) {
      return data.name;
    },
    // 获取服务分类
    getServcieCategoryData() {
      var _this = this;
      request({
        url: _this.getServcieCategoryDataUrl,
        method: "GET",
      })
        .then((response) => {
          const { data } = response;
          _this.servcieCategoryData = data;
          console.log(data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取服务商分配的服务分类
    getCategoryIdList() {
      var _this = this;

      request({
        url:
          _this.listCategoryIdByProviderIdUrl + "/" + _this.serviceProviderId,
        method: "GET",
      })
        .then((response) => {
          const { data } = response;
          _this.categoryIdList = data;
            
          _this.$refs.tree.setCheckedKeys(_this.categoryIdList);
        
          console.log(data);

        })
        .catch((error) => {
          console.log(error);
        });
    },
    saveData() {
      var _this = this;
      _this.loading = true;
      // 当子节点未全部选中时，父节点为半选中状态 将选中的节点数组和半选中的节点数组组合
      var newCategoryIdList = this.$refs.tree
        .getCheckedKeys();
        // .concat(this.$refs.tree.getHalfCheckedKeys());
      console.log(newCategoryIdList);

      var data = {
        serviceProviderId: _this.serviceProviderId,
        categoryIds: newCategoryIdList,
      };

      request({
        url: _this.saveProviderCategoryIdsUrl,
        method: "POST",
        data: data,
      })
        .then((response) => {
          const { data } = response;
          _this.loading = false;
          console.log(data);
          _this.$message({
            message: "保存成功",
            type: "success",
          });
        })
        .catch((error) => {
          _this.loading = false;
          console.log(error);
        });
    },
  },
};
</script>