tree-select使用

tree-select官方文档

安装

npm install --save @riophae/vue-treeselect

基本使用

在vue中的使用：

<!-- Vue SFC -->
<template>
  <div>
	<treeselect
	   :multiple="true"
	   :options="options"
	   placeholder="Select your favourite(s)..."
	   v-model="value"
	   />
	 <treeselect-value :value="value" />
	</div>
</template>

<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
  data: () => ({
    value: [],
    options: [ {
      id: 'fruits',
      label: 'Fruits',
      children: [ {
        id: 'apple',
        label: 'Apple 🍎',
        isNew: true,
      }, {
        id: 'grapes',
        label: 'Grapes 🍇',
      }, {
        id: 'pear',
        label: 'Pear 🍐',
      }, {
        id: 'strawberry',
        label: 'Strawberry 🍓',
      }, {
        id: 'watermelon',
        label: 'Watermelon 🍉',
      } ],
    }, {
      id: 'vegetables',
      label: 'Vegetables',
      children: [ {
        id: 'corn',
        label: 'Corn 🌽',
      }, {
        id: 'carrot',
        label: 'Carrot 🥕',
      }, {
        id: 'eggplant',
        label: 'Eggplant 🍆',
      }, {
        id: 'tomato',
        label: 'Tomato 🍅',
      } ],
    } ],
  }),
}
</script>

在vxe-table中使用

vxe-table文档

normalizer 转换数据结构

<template>
   <vxe-table
    border
    resizable
    height="400"
    :data="list"
    :edit-config="{trigger: 'click', mode: 'row'}">
	  <vxe-table-column field="fruit" min-width="160" title="水果" :edit-render="{name: 'input', attrs: {}}">
        <template v-slot:edit="{ row }">
          <treeselect
          v-model="row.fruit.fruitId"
          :options="options"
          :disable-branch-nodes="true"
          :normalizer="normalizer"
          style="width: 150px"
          placeholder="请选择"
          />
        </template>
        <template v-slot="{ row }">
          <treeselect
          v-model="row.fruit.fruitId"
          :options="options"
          :disable-branch-nodes="true"
          :normalizer="normalizer"
          style="width: 150px"
          placeholder="请选择"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
 </template>
<script>
  // import the component
  import Treeselect from '@riophae/vue-treeselect'
  // import the styles
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
  data: () => ({
    list: [],
    options: [],
  }),
    created() {
    this.getOptions()
  },
  methods: {
    //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node){
      //去掉children=[]的children属性
      if(node.children && !node.children.length){
          delete node.children;
      }
      return {
          id: node.fruitId,
          label:node.fruitName,
          children:node.children
      }
    },
    getOptions(){
    //这里获取后台返回的treeSelect选项数据，并给options赋值
    this.options =  [ {
	     fruitId: 'fruits',
	      fruitName: 'Fruits',
	      children: [ {
	        fruitId: 'apple',
	        fruitName: 'Apple 🍎',
	      }, {
	        fruitId: 'grapes',
	        fruitName: 'Grapes 🍇',
	      }, {
	        fruitId: 'pear',
	        fruitName: 'Pear 🍐',
	      }, {
	        fruitId: 'strawberry',
	        fruitName: 'Strawberry 🍓',
	      }, {
	        fruitId: 'watermelon',
	        fruitName: 'Watermelon 🍉',
	      } ],
	    }, {
	      fruitId: 'vegetables',
	      fruitName: 'Vegetables',
	      children: [ {
	        fruitId: 'corn',
	        fruitName: 'Corn 🌽',
	      }, {
	        fruitId: 'carrot',
	        fruitName: 'Carrot 🥕',
	      }, {
	        fruitId: 'eggplant',
	        fruitName: 'Eggplant 🍆',
	      }, {
	        fruitId: 'tomato',
	        fruitName: 'Tomato 🍅',
	      } ],
	    } ]
    }
  }
}
</script>