element tree组件多选返回数据 element ui tree 回显

清空显示

this.$refs.tree.setCheckedKeys([]);

树，没时间整理干净的出来了，自己看里面的tree的加载把

<template>
<div class="ti">
    <el-button type="primary text2"  @click="add" v-if="userJid[0]['id']==2009001">添加分摊</el-button>
    <el-select v-model="pindex_id" filterable placeholder="请选择"  class="kuan">
      <el-option
        key=""
        label="全部"
        value="">
      </el-option>
      <el-option
        v-for="item in options1"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
    <el-input class="search" placeholder="请输入分摊名称" v-model="search" clearable></el-input>
    <el-button type="primary text2" @click="change(1)">搜索</el-button>
    <div>这里的费用说明，如电费1度是0.5,这里的费用就是0.5。总金额是0.5*（本期读数-上期读数）</div>
    <v-divider></v-divider>
    <v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th class="text-left">ID</th>
            <th class="text-left">分摊名称</th>
            <th class="text-left">分摊类型</th>
            <th class="text-left">项目</th>
            <th class="text-left">上期读数</th>
            <th class="text-left">本期读数</th>
            <th class="text-left">费用</th>
            <th class="text-left">状态</th>
            <th class="text-left">备注</th>
            <th class="text-left">创建人</th>
            <th class="text-left">日期</th>
            <th class="text-left">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr class="text1" v-for="item in desserts" :key="item.id">
            <td >{{item.id}}</td>
            <td >{{item.name}}</td>
            <td >{{item.chargeItem_name}}</td>
            <td >{{item.pindex_name}}</td>
            <td >{{item.xsc_LastReadDegree}}</td>
            <td >{{item.xsc_CurrentReadDegree}}</td>
            <td >{{item.money}}</td>
            <td >{{item.status}}</td>
            <td >{{item.remarks}}</td>
            <td >{{item.user}}</td>
            <td >{{item.date}}</td>
            <td class="cdj_td">
              <div style="color: #1867c0;cursor: pointer;" @click="xiugai(item)" v-if="item.status=='待审核' && userJid[1]['id']==2009002">审核</div>
              <div style="color: red;margin-left: 5px;cursor: pointer;" @click="refuse( item.id )" v-if="item.status=='待审核' && userJid[2]['id']==2009003">拒绝</div>
              <div style="margin-left: 5px;cursor: pointer;" v-if="item.status!='待审核'">无</div>
            </td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
    <v-divider></v-divider>
    <div class="pages" v-if="desserts">
      <Page :total="total" :page-size="page" @on-change="change"  show-total />
    </div>
    <div class="zhanwu" v-else>没有数据</div>
    <!-- 新增和修改 -->
    <Modal
        v-model="modals"
        :ok-text="oktext"
        :loading="loadings"
        width="600"
        :title="title"
        @on-ok="addPost">
        <el-form  label-width="80px" style="height: 660px;overflow: auto;">
          <el-form-item label="分摊名称" :rules="[{required: true}]">
              <el-input v-model="dadepost.name"></el-input>
          </el-form-item>
          <el-form-item label="选择项目" :rules="[{required: true}]">
               <el-select v-model="dadepost.pindex_id" style="width: 100%;"  @change="changess(dadepost.pindex_id)" filterable placeholder="请选择项目">
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="房产类型" :rules="[{required: true}]">
              <el-select v-model="dadepost.type" style="width: 100%;"  placeholder="请选择类型">
                <el-option label="住宅" value="1"></el-option>
                <el-option label="车位" value="2"></el-option>
                <el-option label="储藏室" value="3"></el-option>
                <el-option label="商铺" value="4"></el-option>
              </el-select>
          </el-form-item>
          <span style="margin-left: 80px;color: red;">总费用=（本期读数-上期读数）*分摊费用</span>
          <el-form-item label="分摊费用" :rules="[{required: true}]">
              <el-select v-model="dadepost.charge_id" style="width: 100%;" filterable placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="分摊类型" :rules="[{required: true}]">
            <el-radio v-model="dadepost.share_type" label="1">平摊</el-radio>
            <el-radio v-model="dadepost.share_type" label="2">根据楼层分摊（只能选择一栋）</el-radio>
          </el-form-item>
          <el-form-item label="上期读数" :rules="[{required: true}]">
              <el-input v-model="dadepost.xsc_LastReadDegree"></el-input>
          </el-form-item>
          <el-form-item label="本期读数" :rules="[{required: true}]">
              <el-input v-model="dadepost.xsc_CurrentReadDegree"></el-input>
          </el-form-item>
          <el-form-item label="时间" :rules="[{required: true}]" v-if="dadec == 1">
              <el-date-picker
                v-model="dadepost.datevalue"
                type="daterange"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="时间" :rules="[{required: true}]" v-if="dadec == 2">
              {{dadepost.sdate}}至{{dadepost.enddate}}
          </el-form-item>
          <el-form-item label="备注">
              <el-input v-model="dadepost.remarks"></el-input>
          </el-form-item>
          <span class="bangd">点击打开加载，可查看分摊的房产</span>
          <el-form-item label="分摊房产" :rules="[{required: true}]">
            <div class="text item">
                <el-tree
                :props="datas"
                :data="dataarr"
                lazy
                :load="loadNode"
                show-checkbox
                ref="tree"
                node-key="id"
                includeHalfChecked="false"
                :default-checked-keys="defaultcheckedkeys"
                :default-expanded-keys="[]">
                </el-tree>
            </div>
          </el-form-item>
        </el-form>
    </Modal>
</div>
</template>

<script>
export default {
  data () {
    return {
     dadec:1,
     oktext:'保存',
     title:'添加分摊费用',
     loadings:true,
     modals:false,
     types:[],
     typesvalyel:'',
     activeName: '0',
     search:'',
     company_id:'',
     pindex_id:'',
     desserts: '',
     total:12,
     page:1,
     cs:'',
     dadepost:{
       id:'',
       name:'',
       pindex_id:'',
       charge_id:'',
       type:'',
       remarks:'',
       xsc_LastReadDegree:'',
       xsc_CurrentReadDegree:'',
       checked_id:[],
       checked_ids:[],
       money:'',
       share_type:'',
       datevalue:[],
       sdate:'',
       enddate:'',
     },
     options: [],
     options1: [],
     options2:[],
     userJid:[],
     datas:{
       label: 'label',
       children: 'zones',
       isLeaf: 'leaf',
       value: 'id',
       value1:'region',
       varue2:'type',
       value3:'pindex_id',
     },
     dataarr:[],
     defaultcheckedkeys:[],
     defaultcheckedkeyssa:[],
     node_had: [],
     resolve_had: [],
     name:''
    }
  },
  //界面没出来前加载
  created() {
    this.userJid = [{id:''},{id:''},{id:''},{id:''}];
    this.$myhttp.get('admin/lavel3?pid=2009',{
      'Content-Type': 'application/json'
      }).then(backdata=>{ // 异步执行成功后
        // console.log(backdata.data);
        if(backdata.data != 1){
          var date = backdata.data;
          date.forEach(item => {
            //本界面权限
            if(item.id == 2009001){
              this.userJid[0]['id'] = item.id;
            }
            if(item.id == 2009002){
              this.userJid[1]['id'] = item.id;
            }
            if(item.id == 2009003){
              this.userJid[2]['id'] = item.id;
            }
          });
        }else{
          //本界面权限
          this.userJid = [{id:'2009001'},{id:'2009002'},{id:'2009003'},{id:'2009004'}];
        }
        // console.log(this.userJid)
      });
  },
  mounted(){
    this.change(1);
    //加载公司列表和归属列表
    this.$myhttp.get('admin/getcompany',{
      'Content-Type': 'application/json'
      }).then(backdata=>{ // 异步执行成功后
        this.options = backdata.data[0];
    });
    //查询收费类型
    // this.$myhttp.get('admin/common/type',{
    //   'Content-Type': 'application/json'
    //   }).then(backdata=>{ // 异步执行成功后
    //     this.types = backdata.data.data;
    // });
    //我和我下级的项目
    this.$myhttp.get('admin/common/pindex',{
      'Content-Type': 'application/json'
      }).then(backdata=>{ // 异步执行成功后
         this.options1 = backdata.data.data;
         this.options2 = backdata.data.data;
    });
  },
  methods: {
    //查询
    change(page){
      this.modals = false;
      this.$Loading.start();
      this.$myhttp.get('admin/share/index?page='+page+'&company_id='+this.company_id+'&pindex_id='+this.pindex_id+'&search='+this.search,{
        'Content-Type': 'application/json'
        }).then(backdata=>{ // 异步执行成功后
          this.desserts = backdata.data.data;
          this.total = backdata.data.count;
          this.page = backdata.data.page;
          this.$Loading.finish();
      });
    },
    //项目改变查询收费项
    changess(pindex_id){
      this.$Loading.start();
      this.$myhttp.get('admin/share/getPindexCharge?pindex_id='+pindex_id,{
        'Content-Type': 'application/json'
        }).then(backdata=>{ // 异步执行成功后
          this.types = backdata.data.data;
          this.$Loading.finish();
          this.$forceUpdate();
      });
    },
    //点击添加
    add(){
      this.dadec = 1;
      this.dadepost={
        id:'',
        name:'',
        pindex_id:'',
        charge_id:'',
        type:'',
        remarks:'',
        xsc_LastReadDegree:'',
        xsc_CurrentReadDegree:'',
        checked_id:[],
        checked_ids:[],
        money:'',
        share_type:'',
        datevalue:[],
        sdate:'',
        enddate:'',
      };
      this.defaultcheckedkeyssa = [];
      this.defaultcheckedkeys=[];
      this.$forceUpdate();
      this.oktext='保存';
      this.title='添加分摊费用';
      this.modals = true;
    },
    xiugai(item){
      this.dadec = 2;
      this.oktext='审核';
      this.title='审核分摊费用';
      this.dadepost.id = item.id;
      this.dadepost.name = item.name;
      this.dadepost.pindex_id = item.pindex_id;
      this.dadepost.charge_id = item.charge_id;
      this.dadepost.type = item.type;
      this.dadepost.remarks = item.remarks;
      this.dadepost.xsc_LastReadDegree = item.xsc_LastReadDegree;
      this.dadepost.xsc_CurrentReadDegree = item.xsc_CurrentReadDegree;
      this.dadepost.money = item.money;
      // this.defaultcheckedkeys = item.checked_id;
      this.defaultcheckedkeys=[];
      this.defaultcheckedkeyssa = item.checked_id;
      this.dadepost.sdate = item.sdate;
      this.dadepost.enddate = item.enddate;

      this.$forceUpdate();
      this.node_had.childNodes = [];
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
      this.modals = true;
    },
    //新增和修改保存,审核
    addPost(){
      let id = this.dadepost.id;
      if(this.dadec == 2){
        this.$confirm('确定要审核通过吗', '提示', {
          type: 'warning'
        }).then(() => {
          this.loading = true;
          this.$myhttp.post('admin/share/checks',{'id':id},{
            'Content-Type': 'application/x-www-form-urlencoded'
            }).then(backdata=>{ // 异步执行成功后
              this.change(1);
              this.$Message.success('操作成功');
              this.$Loading.finish();
          });
        }).catch(() => {
        });
        return false;
      }
      if(this.dadepost.name == ''){
        this.$Message.error('分摊名称不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.pindex_id == ''){
        this.$Message.error('项目不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.charge_id == ''){
        this.$Message.error('分摊费用不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.type == ''){
        this.$Message.error('房产类型不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.share_type == ''){
        this.$Message.error('分摊类型不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.xsc_LastReadDegree == ''){
        this.$Message.error('上期读数不能为空');
        this.loading();
        return false;
      }
      if(this.dadepost.xsc_CurrentReadDegree == ''){
        this.$Message.error('本期读数不能为空');
        this.loading();
        return false;
      }

      if(this.dadepost.datevalue != null && this.dadepost.datevalue != ''){
        var d = this.dadepost.datevalue[0];//开始时间
        var e = this.dadepost.datevalue[1];//结束时间
        this.dadepost.sdate = new Date(d).getTime()/1000;
        this.dadepost.enddate = new Date(e).getTime()/1000;
      }else{
        this.dadepost.sdate = "";
        this.dadepost.enddate = "";
      }
      if(this.dadepost.sdate == ""){
        this.$Message.error('时间不能为空');
        this.loading();
        return false;
      }
      var checked_id = this.$refs.tree.getCheckedKeys();//获得全选状态id(回显用)
      var checked_ids = this.$refs.tree.getCheckedNodes();//获得全选状态id数组（保存遍历出住宅用）,不用
      this.dadepost.checked_id = checked_id;
      this.dadepost.checked_ids = checked_ids;
      if(checked_id.length == 0){
        this.$Message.error('请选择分摊的房产');
        this.loading();
        return false;
      }
      this.$Loading.start();
      this.$myhttp.post('admin/share/addPost',this.dadepost,{
        'Content-Type': 'application/x-www-form-urlencoded'
        }).then(backdata=>{
          this.$Loading.finish();
          this.change(1);
      });
    },
    //绑定（懒加载方法）
    loadNode(node, resolve) {
        var _this = this;
        setTimeout(() => {
        if (node.level === 0) {
          this.node_had.childNodes = [];
          this.node_had = node;
          this.resolve_had = resolve;
          return resolve([{'label':this.name,'id':this.dadepost.pindex_id,'region':0,'type':this.dadepost.type,'pindex_id':this.dadepost.pindex_id,superior:'0'}]);
        }
        if(this.dadepost.pindex_id == ''){
            this.$Message.error('请选择项目');
            this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
            this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
            return false;
        }
        if(this.dadepost.type == ''){
            this.$Message.error('请选择房产类型');
            this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
            this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
            return false;
        }
        //加载
        node.data && this.$myhttp.post('admin/getbindingArrs',node.data,{
        'Content-Type': 'application/json'
        }).then(backdata=>{ // 异步执行成功后
          // _this.defaultcheckedkeys =  _this.arr;
          _this.defaultcheckedkeys=_this.defaultcheckedkeyssa;
          return resolve(backdata.data);
        });
        }, 300);
    },
    //拒绝通过
    refuse(id){
      this.$confirm('确定要拒绝通过吗', '提示', {
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.$myhttp.post('admin/share/refuse',{'id':id},{
          'Content-Type': 'application/x-www-form-urlencoded'
          }).then(backdata=>{
            this.change(1);
            this.$Message.success('操作成功');
            this.$Loading.finish();
        });
      }).catch(() => {
      });
    },

    loading(){
      this.loadings = false;
      setTimeout(() => {
          this.loadings = true;
      }, 100);
    }

  },
  watch: {
    //两个懒加载方法
    'dadepost.type'(val){
      this.node_had.childNodes = [];
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    },
    'dadepost.pindex_id'(val){
      this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
      let _this = this;
      this.options2.forEach(function(it){
        if(val == it.id){
          _this.name = it.name;
        }
      })
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    }
  }
}
</script>
<style scoped>
.ti{
  margin: 1%;
  width: 98%;
}
.text1{
  text-align: center;
}
.pages{
  margin-top: 2%;
  margin-right: 3%;
  text-align: right;
}
.zhujie{
  margin-left: 14%;
  color: brown;
}
.search{
  margin-top: 0.2%;
  width: 20%;
  margin-bottom: 1.5%;
}
.text2{
  color: rgb(250, 248, 248);
}
.kuan{
  width: 12%;
}
.zhanwu{
  text-align: center;
  color: rgb(207, 205, 205);
  font-size: 20px;
  margin-top: 3%;
}
.text3{
  color: rgb(9, 145, 145);
}
.bangd{
  margin-left: 14%;
  color: rgb(6, 141, 107);
}
.item{
  margin-top: 1%;
}
</style>