提示

cascader为需要联动的子选择框prop值，填写多个就会形成一对多的关系,key为上一级传递下来的值，你也可以直接写其他form的值

Select多级联动

vue2

vue3

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({
  province: '110000',
  city: '110100',
  area: '110101'
});

const option = ref({
  column: [
    {
      label: '省份',
      prop: 'province',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      cascader: ['city'],
      dicUrl: `${baseUrl}/getProvince`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '城市',
      prop: 'city',
      type: 'select',
      cascader: ['area'],
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getCity/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '地区',
      prop: 'area',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getArea/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择地区',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>

Select+InputTable多级联动

vue2

vue3

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({
  province: '110000',
  city: '110100'
});

const option = ref({
  column: [
    {
      label: '省份',
      prop: 'province',
      type: 'table',
      cascader: ['city'],
      children: {
        border: true,
        column: [
          {
            label: '名称',
            search: true,
            searchSpan: 24,
            prop: 'name'
          }
        ]
      },
      formatter: (row) => {
        if (!row.name) return '';
        return row.id + '-' + row.name;
      },
      onLoad: ({ page, value, data }, callback) => {
        if (value) {
          console.log('首次查询' + value);
          callback({
            id: '110000',
            name: '北京市'
          });
          return;
        }
        if (data) {
          console.log('搜索查询参数' + JSON.stringify(data));
        }
        if (page) {
          console.log('分页参数' + JSON.stringify(page));
        }
        callback({
          total: 2,
          data: [
            {
              id: '110000',
              name: '北京市'
            },
            {
              id: '130000',
              name: '河北省'
            }
          ]
        });
      },
      props: {
        label: 'name',
        value: 'id'
      }
    },
    {
      label: '城市',
      prop: 'city',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getCity/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>

Select+Radio多级联动

vue2

vue3

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue'

const baseUrl = 'https://cli.avuejs.com/api/area'

const form = ref({
  province: '110000',
  city: '110100'
})

const option = ref({
  column: [
    {
      label: '省份',
      prop: 'province',
      type: 'radio',
      cascader: ['city'],
      span: 24,
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getProvince`
    },
    {
      label: '城市',
      prop: 'city',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getCity/${form.value.province}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }
      ]
    }
  ]
})
</script>

Select+Input多级联动

vue2

vue3

110000-北京市130000-河北省

<template>
  <el-tag>110000-北京市</el-tag>
  <el-tag>130000-河北省</el-tag>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref } from 'vue';

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({
  province: '110000',
  city: '110100'
});

const option = ref({
  column: [
    {
      label: '省份',
      prop: 'province',
      cascader: ['city'],
    },
    {
      label: '城市',
      prop: 'city',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getCity/{{key}}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>

传递其他参数

vue2

vue3

<template>
  <tvue-form :option="option"
             v-model="form"></tvue-form>
</template>

<script setup>
import { ref, computed } from 'vue';

const baseUrl = 'https://cli.avuejs.com/api/area';

const form = ref({
  province: '110000',
  city: '110100',
  params: 'test'
});

const option = ref({
  column: [
    {
      label: '省份',
      prop: 'province',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      cascader: ['city'],
      dicUrl: `${baseUrl}/getProvince`,
      rules: [
        {
          required: true,
          message: '请选择省份',
          trigger: 'blur'
        }
      ]
    },
    {
      label: '参数',
      prop: 'params'
    },
    {
      label: '城市',
      prop: 'city',
      type: 'select',
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: `${baseUrl}/getCity/${form.value.province}?params=${form.value.params}`,
      rules: [
        {
          required: true,
          message: '请选择城市',
          trigger: 'blur'
        }
      ]
    }
  ]
});
</script>