表单高级用法

表单初始化

<template>
  <el-button type="primary"
             @click="handleReload">Key初始化</el-button>
  <avue-form :key="reload"
             :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      reload: Math.random(),
      option: {
        border: true,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }, {
            label: '省份',
            prop: 'province',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          }]
      }
    }
  },
  methods: {
    handleReload () {
      this.reload = Math.random();
      this.$message.success('初始化完成')
    }
  }
}
</script>

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

配置项服务端加载

TIP

• 这里没有走真真的服务器请求，而是做了一个模拟

<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="getOption">服务端加载</el-button>
  <avue-form :key="reload"
             v-model="form"
             :option="option"
             v-loading="loading"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      reload: Math.random(),
      loading: true,
      form: {},
      option: {},
    };
  },
  methods: {
    getOption () {
      this.$message.success('模拟2s后服务端动态加载');
      setTimeout(() => {
        this.option = {
          border: true,
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            }, {
              label: '性别',
              prop: 'sex'
            }, {
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
              rules: [
                {
                  required: true,
                  message: '请选择省份',
                  trigger: 'blur'
                }
              ]
            }]
        }
        this.form = {
          name: '张三',
          sex: '男',
          province: '110000'
        }
        this.reload = Math.random()
        this.loading = false;
      }, 2000)


    }
  }
}
</script>

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

配置项切换

<template>
  <el-button type="primary"
             icon="el-icon-sort"
             @click="handleSwitch">切 换</el-button>
  <br /><br />
  <avue-form :key="reload"
             v-model="form"
             :option="option">
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      reload: Math.random(),
      type: true,
      form: {
        name: '张三',
        sex: '男',
        username: 'smallwei',
        password: 'smallwei'
      },
      option: {},
      option1: {
        addBtn: false,
        column: [
          {
            label: '昵称',
            prop: 'name'
          }
        ]
      },
      option2: {
        addBtn: false,
        column: [
          {
            label: '用户名',
            prop: 'username'
          }, {
            label: '密码',
            prop: 'password',
            type: 'password'
          }, {
            label: '姓名',
            prop: 'name'
          }
        ]
      },
    };
  },
  mounted () {
    this.handleSwitch();
  },
  methods: {
    handleSwitch () {
      this.type = !this.type;
      if (this.type) {
        this.option = this.option1;
      } else {
        this.option = this.option2;
      }
      this.reload = Math.random();
    }
  }
}
</script>

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

动态改变结构

<template>
  <avue-form v-model:defaults="defaults"
             :option="option"
             v-model="form"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      defaults: {},
      form: {
        text1: 0,
      },
      option: {
        column: [{
          label: '内容1',
          prop: 'text1',
          type: 'radio',
          dicData: [{
            label: '显示',
            value: 0
          }, {
            label: '隐藏',
            value: 1,
          }]
        }, {
          label: '内容2',
          prop: 'text2',
          display: true
        }, {
          label: '内容3',
          prop: 'text3'
        }]
      }
    }
  },
  watch: {
    'form.text1' (val) {
      if (val == 0) {
        this.defaults.text2.display = true
        this.defaults.text3.label = '内容3'
      } else {
        this.defaults.text2.display = false
        this.defaults.text3.label = '有没有发现我变了'
      }
    }
  }
}
</script>

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