表单多级联动

TIP

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

Select多级联动

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city: '110100',
        area: '110101'
      },
      option: {
        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多级联动

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city: '110100'
      },
      option: {
        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) {
              this.$message.success('首次查询' + value)
              callback({
                id: '110000',
                name: '北京市'
              })
              return
            }
            if (data) {
              this.$message.success('搜索查询参数' + JSON.stringify(data))
            }
            if (page) {
              this.$message.success('分页参数' + 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多级联动

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city: '110100'
      },
      option: {
        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/{{key}}`,
          rules: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'blur'
            }
          ]
        }]
      }
    }
  }
}
</script>

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

Select+Input多级联动

110000-北京市130000-河北省

<template>
  <el-tag>110000-北京市</el-tag>
  <el-tag>130000-河北省</el-tag>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city: '110100'
      },
      option: {
        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>

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

传递其他参数

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
var baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      form: {
        province: '110000',
        city: '110100',
        params: 'test'
      },
      option: {
        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/{{key}}?params={{params}}`,
          rules: [
            {
              required: true,
              message: '请选择城市',
              trigger: 'blur'
            }
          ]
        }]
      }
    }
  }
}
</script>

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