[SI에서 살아남기] ElementUI+Vue에 대한 설명과 이해 el-tree [2]

el-tree

• 노드 구조로 되어있음.
• HTML과 매칭하는 속성이 아님
• 테이블 구조로 나열할때 편리함.

Element UI tree API 를 확인하시면 보다 자세한 내용을 볼 수 있습니다.

 

 

<!-- bcTree.vue-->
<el-tree
  :data="treeNodes"
  :node-key="itemValue"
  :label="itemText"
  @node-click="nodeClick"
>
//Elment-ui 에서 제공하는 커스텀 트리노드
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data[label] }}</span>
<script>
export default {
  name: 'bc-tree',  
  props: {
    label: {  
      type: String,
      default: ''
    },
    treeData: {
      type: Array,
      default: null
    },
    itemValue: {
      type: String,
      default: 'no'
    },
    itemText: {
      type: String,
      default: 'label'
    },
  },
  data () {
      return {
        treeNodes: [],
      }
  },
  watch:{
  	  //부모 테이블에서 treeData의 값을 변경시 동작
      treeData () {
      	this.treeNodes = this.treeData;
      },
  },
   methods: {
         nodeClick(node) {
         //누른 레이블 값을 콘솔창에 띄움.
        console.log(node);
      }
   }
</script>

위에는 트리 템플릿입니다.

 

<!-- Main.vue-->
<bc-tree
  :treeData="treedata"
/>

<script>
import bcTree from 'bcTree'
Vue.component(bcBtn.name,bcBtn);
export default{
	data(){
    	return{
      		text: '',
            treedata: [],
        }
	},
    beforeMount() {
    	this.treedata=[{
        	no:1,
          	label: '1번째 컬럼',
            children: [
             {
             	no:2,
                label: '1-1번째 컬럼',
                children: [{
                	no:3,
                  	label: '1-1-1번째 컬럼',
                }]
              },
              {
                  no:4,
                  label: '1-2번째 컬럼',
                  children: [{
                  		no:5,
                      	label: '1-2-1번째 컬럼',
                  }]
              }]
          }]
}          
</script>

 

동작원리를 설명하자면

1.Main.vue가 실행되기전에 beforeMount()가 실행되면서 treedata의 값을 변경한다. (beforeMount=vue의 기본 이벤트)

2.treedata에 의해서 컴포넌트의 treeData가 변경됨을 느끼고 bcTree.vue의 watch()가 실행된다.

3.bcTree.vue의 watch로 인해 this.treeNodes에 Main.vue의 값인 treedata에 전달되고 컴포넌트인 data에 바인딩한다.

4. data에가 element-ui의 커스텀 span에 data값과 date['label'] 바인딩이 된다.

5.node-key의 default값 no와 label의 default값 label을 찾아 for문처럼 값을 렌더링 한다.

 

 

많이 어려운 것 같아요. 이거는 단편적이게만 작성하였지만 실제 코드는 모든 데이터를 백엔드의 url에서 받아야하기 때문에 더욱 복잡해지는 것 같아요.. 저도 많이 공부해야할 것 같네요

 

다음은 el-upload에 대해서 배워보도록 할게요.