SmartCommunity/smart/src/views/vehicleInformation/setpPage/native.vue

<template>
  <div>
    <!-- class="filter-tree"
          :props="defaultProps"
          show-checkbox
    -->
    <!-- <el-tree
      class="filter-tree"
      :data="dataRes"
      @check="checkChange"
      node-key="value"
      :props="defaultProps"
      accordion
      check-strictly
      show-checkbox
      highlight-current
      :default-expanded-keys="defaultArr"
      :default-checked-keys="defaultArr"
      :filter-node-method="filterNode"
      ref="tree"
    >
    </el-tree> -->

    <el-scrollbar
      class="el-scrollbar-byself"
      style="width: 100%"
    >
      <el-tree
        :data="tenantsTree"
        show-checkbox
        node-key="value"
        :props="treedefaultProps"
        :default-checked-keys="defaultcheckedkeys"
        ref="tenantstree"
        @check-change="checkChange"
      >
        <div
          style="width: 100%"
          slot-scope="{ node, data }"
          @click="thisCheck($event, node, data)"
        >{{ data.name }}</div>
      </el-tree>
    </el-scrollbar>

  </div>
</template>


<script>


export default {
  props: ['params'],
  data () {
    return {
      // defaultProps: {
      //   children: 'children',
      //   label: 'name'
      // },//过滤使用字段
      // dataRes: [],
      checkedData: {},//当前点击的数据


      Information: '',


      id: '',
      positionInformation: [],
      value: '',


      tenantsTree: [],
      treedefaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultcheckedkeys: []
    }
  },

  methods: {
    /** 控制树形单选 */
    checkChange (data, checked) {
      this.checkedData = {}
      if (checked) {
        if (!!data.children && data.children.length > 0) {
          console.log("有子节点不可选")
        } else {
          this.checkedData = data;
          // 注意！！！
          //1、下方的id和属性中 node-key="id"必须是同一个字段  
          //2、$refs.tree 也需要和上方的属性匹配 ref="tree"
          this.$refs.tenantstree.setCheckedKeys([data.value]);
          this.value = data.value;
          this.Information = data.name;
        }
      }
      this.value = this.checkedData.value;
      console.log("checked data", data, this.checkedData)
      this.Information = this.checkedData.name


    },
    submit () {
      if (this.Information != undefined) {
        this.positionInformation.push({ positionInformation: this.Information, id: this.id, value: this.value });
        this.params.callback(this.positionInformation);
        this.$emit('close');
      }

    },

    filterTreeData (trData) {
      console.log(trData)
      trData.map((item, index) => {
        if (this.isNotEmpty(item.children)) {
          item.disabled = true;
          this.filterTreeData(item.children);
        } else {
          item.disabled = false;
        }
      });
    },
    isNotEmpty (arr) {
      return arr && Array.isArray(arr) && arr.length > 0;
    },
    thisCheck (ev, node, data) {

      if (!data.disabled) {
        node.checked = node.checked;
      }
    },
    garage () {
      this.$http.get('/sc-community-web/assets/tree/garage/find').then(({ data, status, msg }) => {
        this.dataRes = data;
        this.filterTreeData(this.dataRes);
        this.tenantsTree = this.dataRes;
      })
    }
  },
  created () {
    // 数图
    this.garage();
    this.id = this.params.id;
    console.log(this.id);
    this.Information = this.params.positionInformation;
    debugger;
    this.value = this.params.value;
    // 显示
    this.defaultcheckedkeys = [this.params.value]


  }
}
</script>