树选择器

基础树选择

请选择+0 ()

请选择+2

<template>
    <div class="demo-treeSelect-column">
        <div class="demo-treeSelect-row" style="width: 300px;">
            <t-tree-select :data="options" v-model="value" clearable placeholder="请选择">
                <template #valueDisplay="{ value }"> {{ value.label }}({{ value.value }}) </template>
            </t-tree-select>
        </div>
        <div class="demo-treeSelect-row" style="width: 300px;">
            <t-tree-select
            class="tree-select-multiple"
            :data="options"
            v-model="mulValue"
            multiple
            clearable
            filterable
            placeholder="请选择"
            >
            <template #valueDisplay="{ value, onClose }">
                <t-tag v-for="(item, index) in value" :key="index" closable :onClose="() => onClose(index)">
                {{ item.label }}
                </t-tag>
            </template>
            </t-tree-select>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      value: 'shenzhen',
      mulValue: ['shenzhen', 'guangzhou'],
      options: [{
        label: '广东省',
        value: 'guangdong',
        children: [{
          label: '广州市',
          value: 'guangzhou',
        }, {
          label: '深圳市',
          value: 'shenzhen',
        }],
      }, {
        label: '江苏省',
        value: 'jiangsu',
        children: [{
          label: '南京市',
          value: 'nanjing',
        }, {
          label: '苏州市',
          value: 'suzhou',
        }],
      }],
    };
  },
  methods: {
    onBlurTrigger(context) {
      console.log(context);
    },
  },
};
</script>

显示代码 复制代码 复制代码