elementui 项目记录

1.树形控件

1. :props=“qxtreeProps”
   qxtreeProps: { children: "children", label: "qxmc", }, //树形结构对应字段，要回显时注意，后端查询只需要子节点数据，不然带上父节点，回显会把其父节点下所有叶子节点都选上，造成数据错误
2. :data=“qxtreedata” //后端给的树形结构数据
3. @check-change=“handleCheckChange”

    handleCheckChange(data, checked, indeterminate) {
      //获取父节点及以上到主节点 数据	 	
      let res = this.$refs.tree.getCheckedNodes(false, true);
      let arr = [];
      res.forEach((item) => {
        arr.push(item.qxid);
      });
      this.jsqxArr = arr;
      console.log(arr);
    },

      <div class="scrollClass">
        <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
          <el-tree
            :props="qxtreeProps"    
            :data="qxtreedata"     
            :show-checkbox="true"
            ref="tree"
            node-key="qxid"
            :default-checked-keys="jsqxids"
            @check-change="handleCheckChange"
            default-expand-all
          >
          </el-tree>
        </el-scrollbar>
      </div>

/*设置树形控件格高度，超过出现滚动条 */
.scrollClass {
  height: 40vh;
}
/* 把原有的横向滚动条隐藏 */
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

2.滚动条

      <div class="scrollClass">
        <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
        	代码
        </el-scrollbar>
      </div>

	/*设置控件格高度，超过出现滚动条 */
	.scrollClass {
	  height: 70vh;
	}
	/* 把原有的横向滚动条隐藏 */
	/deep/ .el-scrollbar__view {
	  overflow-x: hidden;
	}

3.动态加输入框

<!--添加个可以动态删除的按钮 -->
<el-button @click.prevent="removeDomain(domain)">删除</el-button>
<el-button @click="addDomain">新增采样时间</el-button>

    removeDomain(item) {
      var index = this.form.domains.indexOf(item);
      if (index !== -1) {
        this.form.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.form.domains.push({
        key: Date.now(),
      });
    },

4.穿梭框

      <el-transfer
        filterable
        :titles="['未选用户', '已选用户']"
        :button-texts="['移除', '添加']"
        :filter-method="filterMethod"
        filter-placeholder="请输入用户拼音码查询"
        v-model="valuecs"
        :data="data"
      >
      </el-transfer>

  data() {
   return {
   		/** 拼音吗搜索*/
	   filterMethod(query, item) {
	        return item.pinyin.indexOf(query.toUpperCase()) > -1;
	      },
	  }
}	

//valuecs 后台查询，把需要穿梭的值带出来，是一个数组
 yhjsByid(this.jsid).then((res) => {
        this.yhsjList = res.data;
        let list = res.data;
        //单独拿数组对象里面的 几个对象
        let arr = list.map((item) => {
          return Object.assign({}, { yhid: item.yhid });
        });
        //数组对象，把其中对象属性组装成 数组
        var list1 = [];
        for (var key in arr) {
          list1.push(arr[key].yhid);
        }
        this.valuecs = list1;
      });  
 //data 数据 
 yhlist().then((res) => {
        let list = res.data;
        list = JSON.parse(JSON.stringify(list).replace(/yhxm/g, "label"));
        list = JSON.parse(JSON.stringify(list).replace(/yhid/g, "key"));
        list = JSON.parse(JSON.stringify(list).replace(/pym/g, "pinyin"));
        this.data = list;
      });    

      //深拷贝
      let bmxx = JSON.parse(JSON.stringify(this.queryParams));