级联选择器

单选级联选择器

请选择

请选择

<template>
    <div class="demo-cascader-column">
        <div class="demo-cascader-row" style="width: 320px;">
            <t-cascader
                v-model="value"
                :options="options"
                clearable
                size="medium"
                placeholder='请选择'
                class="t-demo-cascader"
                @change="onChange"
            ></t-cascader>
        </div>
        <div class="demo-cascader-row" style="width: 320px;">
            <t-cascader
                disabled
                clearable
                size="medium"
                placeholder='请选择'
                class="t-demo-cascader"
                @change="onChange"
            ></t-cascader>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        options: [
            {
            label: '选项一',
            value: '1',
            children: [
                {
                label: '子选项一',
                value: '1.1',
                },
                {
                label: '子选项二',
                value: '1.2',
                },
                {
                label: '子选项三',
                value: '1.3',
                children: [{
                    label: '子选项四',
                    value: '1.4'
                }]
                },
            ],
            },
            {
            label: '选项二',
            value: '2',
            children: [
                {
                label: '子选项一',
                value: '2.1',
                },
                {
                label: '子选项二',
                value: '2.2',
                },
            ],
            },
        ],
        value: '1.1',
        };
    },
    methods: {
        onChange(val, context) {
            console.log(this.value, val, context);
            // console.log('path: ', context.node.getPath());
        },
    },
};
</script>

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

多级联选择器

请选择

<template>
    <div class="demo-cascader-row" style="width:600px;">
         <t-cascader class="t-demo-cascader" :options="options" v-model="value" multiple clearable/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            options: [
                {
                    label: '选项一',
                    value: '1',
                    children: [
                        {
                        label: '子选项一',
                        value: '1.1',
                        },
                        {
                        label: '子选项二',
                        value: '1.2',
                        },
                        {
                        label: '子选项三',
                        value: '1.3',
                        },
                    ],
                },
                {
                    label: '选项二',
                    value: '2',
                    children: [
                        {
                        label: '子选项一',
                        value: '2.1',
                        },
                        {
                        label: '子选项二',
                        value: '2.2',
                        },
                    ],
                },
            ],
            value: ['1.1'],
        };
    },
    methods: {
        handleValueChange(e) {
            this.value = e;
        },
    },
};
</script>

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

不同尺寸的级联选择器

请选择

请选择

请选择

<template>
  <div class="demo-cascader-column">
    <div class="demo-cascader-row" style="width:600px;">
        <!-- 非受控用法 -->
        <t-cascader class="t-demo-cascader" :options="options" :defaultValue="value" clearable size="small" placeholder='请选择'></t-cascader>
    </div>
    <div class="demo-cascader-row" style="width:600px;">
        <!-- 受控+语法糖用法 -->
        <t-cascader class="t-demo-cascader" :options="options" v-model="value" clearable size="medium" placeholder='请选择'></t-cascader>
    </div>
    <div class="demo-cascader-row" style="width:600px;">
        <!-- 受控用法 -->
        <t-cascader class="t-demo-cascader" :options="options" :value="value" @change="handleValueChange" clearable size="large" placeholder='请选择'></t-cascader>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: '选项一',
          value: '1',
          children: [
            {
              label: '子选项一',
              value: '1.1',
            },
            {
              label: '子选项二',
              value: '1.2',
            },
            {
              label: '子选项三',
              value: '1.3',
            },
          ],
        },
        {
          label: '选项二',
          value: '2',
          children: [
            {
              label: '子选项一',
              value: '2.1',
            },
            {
              label: '子选项二',
              value: '2.2',
            },
          ],
        },
      ],
      value: '1.1',
    };
  },
  methods: {
    handleValueChange(e) {
      this.value = e;
    },
  },
};
</script>

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

动态加载的级联选择器

请选择

<template>
  <div>
    <t-cascader class="t-demo-cascader" :options="options" v-model="value" clearable :load="load" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          label: '选项1',
          value: '1',
          children: true,
        },
        {
          label: '选项2',
          value: '2',
          children: true,
        },
      ],
      value: '',
    };
  },
  methods: {
    load(node) {
      return new Promise((resolve) => {
        setTimeout(() => {
          let nodes = [];
          if (node.level < 2) {
            nodes = [
              {
                label: `${node.label}.1`,
                children: node.level < 2,
              },
              {
                label: `${node.label}.2`,
                children: node.level < 2,
              },
            ];
          }
          resolve(nodes);
        }, 1000);
      });
    },
  },
};
</script>

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