vue test

MondayCat111
已于 2022-02-21 11:00:13 修改
阅读量542
点赞数
文章标签： vue.js 前端 javascript
于 2022-02-19 22:15:32 首次发布
本文链接：https://blog.csdn.net/qq_40716254/article/details/123024940
版权
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>test</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
	
<body>
	<div id="app">
    <div class="tree-setting">
      <el-scrollbar :native="false">
        <div class="tree-setting--left"> 
          <p class="tree-setting--left__text">监控点所在区域</p>
          <el-tree
            node-key="id"
            :data="treeData"
            :highlight-current="true"
            :default-expanded-keys="expandedKeys"
            :props="defaultProps"
            @node-click="selectRegion"
          >
          </el-tree>
        </div>
      </el-scrollbar>
      <el-scrollbar :native="false">
        <div class="tree-setting--middle">
          <p class="tree-setting--middle__text">待选择监控点
            <span class="tree-setting--middle__text">
              <el-checkbox v-model="isContain">是否包含下级组织</el-checkbox>
            </span>
          </p>
          <p class="tree-setting--middle__name">
            <el-checkbox 
              v-model="checkAll" 
              :indeterminate="isIndeterminate" 
              @change="middleAllChecked"
            >监控点名称</el-checkbox>
          </p>
          <div>
            <el-tree
              show-checkbox
              ref="middleTree"
              node-key="id"
              :data="middleTreeData"
              :default-checked-keys="middleChecked"
              :props="defaultProps"
              @check-change="changeMiddleData"
            >
          </div>
          <div class="tree-setting--middle__footer">
            <el-pagination 
              small
              layout="prev, pager, next" 
              :total="this.page.total"
              :current-page="this.page.pageNo"
              @current-change="changePage"
            ></el-pagination>
          </div>
        </div>
      </el-scrollbar>
      <div class="tree-setting--segmentation"></div>
      <el-scrollbar :native="false">
        <div class="tree-setting--right">
          <p class="tree-setting--right__text">已选择监控点{{chooseNumber}}个</p>
          <p class="tree-setting--right__name"><el-checkbox v-model="checkedRight" @change="rightAllChecked">监控点名称</el-checkbox></p>
          <el-tree
            show-checkbox
            node-key="id"
            :data="rightTreeData"
            :props="defaultProps"
            @check-change="changeRightData"
          >
        </div>
      </el-scrollbar>
      <div class="right_border"></div>
    </div>
  </div>
</body>

<script>

const app = new Vue({
  el: '#app',
  data () {
  	return {
      checkAll: false,
      checkedRight: false,
      chooseNumber: 0,
      checked: false,
      label: 'label',
      isContain: false,
      isIndeterminate: false,
      treeData: [],
      middleTreeData: [],
      rightTreeData: [],
      expandedKeys:[],
      middleChecked: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
	    page: {
	    	pageNo: 1,
	    	pageSize: 5,
	    	total: 0
	    }
  	}  	  
  },
  mounted () {
  	this.requestTreeData();
  },
  computed: {},
  methods: {
  	/** ��ȡ��ص����� */
  	requestTreeData () {
  		axios.post("http://preview.shamiao.xyz/api/v1/exam/1/getAreaData").then((res) => {
        if(res.data.code === '200'){
          if(res.data.data){
            this.treeData = res.data.data;
            this.expandedKeys.push(res.data.data[0].id);
          }
        }
      });
  	},
  	/** ���ݼ�ص�����ID,��ȡ�������¼�ص� */
  	requestMonitorData () {
  		axios.post("http://preview.shamiao.xyz/api/v1/exam/1/getMonitorByAreaId", {
  			pageNo: this.page.pageNo,
  			pageSize: this.page.pageSize,
  			id: this.queryAreaId,
  			isContain: this.isContain
  		}).then((res) => {
        this.page.total = res.data.data.total;
        this.middleTreeData = res.data.data.list;
        this.$nextTick(() => {
          console.log(111,this.rightTreeData)
          this.$refs["middleTree"].setCheckedNodes(this.rightTreeData);
          this.judgeMiddleSelectedAll();
      });

      });
  	},
    selectRegion (data) {
      this.page.pageNo = 1;
      this.queryAreaId = data.id;
      this.requestMonitorData ();
    },
    changePage (currentPage) {
      this.page.pageNo = currentPage;
      this.requestMonitorData();
    },
    middleAllChecked (checked) {
      checked ? this.$refs["middleTree"].setCheckedNodes(this.middleTreeData) : this.$refs["middleTree"].setCheckedNodes([]);
    },
    changeMiddleData (data ,checked) {
      if (checked) {
        if (!this.rightTreeData.length) {
          this.rightTreeData.push(data);
        } 
        else {
          let rightTreeIds = [];
          this.rightTreeData.forEach(element => {
            rightTreeIds.push(element.id);
          });
          if(!rightTreeIds.includes(data.id)){
            this.rightTreeData.push(data);
          }
        }
      } else {
        console.log(222,this.rightTreeData)
        let arr = [];
        this.rightTreeData.forEach(element => {
          if(element.id !== data.id){
            arr.push(element);
          }
        });
        this.rightTreeData = arr;
      }
      this.chooseNumber = this.rightTreeData.length;
      this.judgeMiddleSelectedAll();
    },
    judgeMiddleSelectedAll () {
      let checkedCount = this.$refs["middleTree"].getCheckedNodes().length;
      this.checkAll = checkedCount === this.page.pageSize;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.page.pageSize;
    },
    changeRightData (data, checked) {
      if (checked) {
        let arr = [];
        this.rightTreeData.forEach(element => {
          if(element.id !== data.id){
            arr.push(element);
          }
        });
        this.rightTreeData = arr;
        this.$refs["middleTree"].setCheckedNodes(this.rightTreeData);
      }
      this.judgeMiddleSelectedAll();
    },
    rightAllChecked (checked) {
      if (checked) {
        this.rightTreeData = [];
        this.$refs["middleTree"].setCheckedNodes([]);
        this.checkedRight = false;
      }
    }
  }
});	

</script>

<style>
body .el-scrollbar__wrap {
    overflow: auto;
}
html,body,#app {
	position: relative;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}
#app {
  font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tree-setting {
  width: 800px;
  height: 300px;
  display: flex;
  position: relative;
}
.tree-setting--left, .tree-setting--middle, .tree-setting--right, .tree-setting--segmentation {
  width: 247px;
  border: 1px solid #eee;
  height: 298px;
  overflow: auto;
}
.tree-setting--middle{
  width: 300px;
}
.tree-setting--segmentation {
  width: 30px;
  border-right: none;
}
.tree-setting--left p,.tree-setting--middle p, .tree-setting--right p {
  height: 26px;
  line-height: 26px;
  font-weight: blod;
  border-bottom: 1px solid #eee;
  margin: 0;
  padding: 0 0 0 12px;
}
.tree-setting--left__text,.tree-setting--middle__text, .tree-setting--right__text {
  font-weight: bolder;
}
.tree-setting--middle__text {
  padding: 0;
  margin-left: 36px;
}
.tree-setting--middle__name .el-checkbox__label, .tree-setting--right__name .el-checkbox__label{
  padding-left: 35px;
  font-size: 12px;
}
.tree-setting--middle__footer {
  margin-top: 10px;
  width: 280px;
  position: absolute;
  bottom: 0;
  text-align: center;
  padding: 0;
}
.el-tree-node__content>.el-tree-node__expand-icon {
  padding: 0;
}
.el-tree-node__content>label.el-checkbox {
  margin-right: 35px;
}
.right_border {
  width: 1px;
  height: 298px;
  border-left: 1px solid #eee;
}
</style>
</html>
MondayCat111
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue test

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>笔试题目</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">
复制链接

扫一扫
vue test

“相关推荐”对你有帮助么？
