详解Vue如何进行表单联动与级联选择

<template>
  <div>
    <label for="input1">输入1：</label>
    <input id="input1" v-model="input1">
    <br>
    <label for="input2">输入2：</label>
    <input id="input2" :value="input2Computed" @input="input2 = $event.target.value">
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  },
  computed: {
    input2Computed() {
      return this.input1.toUpperCase()
    }
  }
}
</script>

<template>
  <div>
    <label for="input1">输入1：</label>
    <input id="input1" v-model="input1">
    <br>
    <label for="input2">输入2：</label>
    <input id="input2" v-model="input2">
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: '',
      input2: ''
    }
  },
  watch: {
    input1() {
      this.input2 = this.input1.toUpperCase()
    }
  }
}
</script>

<template>
  <div>
    <label for="select1">选择1：</label>
    <select id="select1" v-model="select1">
      <option value="">请选择</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    <br>
    <label for="select2">选择2：</label>
    <select id="select2" v-model="select2">
      <option value="">请选择</option>
      <option v-for="option in select2Options" :value="option">{{ option }}</option>
    </select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      select1: '',
      select2: '',
      select2Options: []
    }
  },
  watch: {
    select1() {
      if (this.select1 === 'A') {
        this.select2Options = ['A1', 'A2', 'A3']
      } else if (this.select1 === 'B') {
        this.select2Options = ['B1', 'B2', 'B3']
      } else if (this.select1 === 'C') {
        this.select2Options = ['C1', 'C2', 'C3']
      } else {
        this.select2Options = []
      }
      this.select2 = ''
    }
  }
}
</script>

<template>
  <div>
    <label for="select1">选择1：</label>
    <select id="select1" v-model="select1">
      <option value="">请选择</option>
      <option v-for="option in select1Options" :value="option.value">{{ option.label }}</option>
    </select>
    <br>
    <label for="select2">选择2：</label>
    <select id="select2" v-model="select2">
      <option value="">请选择</option>
      <option v-for="option in select2Options" :value="option.value">{{ option.label }}</option>
    </select>
    <br>
    <label for="select3">选择3：</label>
    <select id="select3" v-model="select3">
      <option value="">请选择</option>
      <option v-for="option in select3Options" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>
<script>
const options = [
  {
    value: 'A',
    label: 'A',
    children: [
      {
        value: 'A1',
        label: 'A1',
        children: [
          {
            value: 'A11',
            label: 'A11'
          },
          {
            value: 'A12',
            label: 'A12'
          }
        ]
      },
      {
        value: 'A2',
        label: 'A2',
        children: [
          {
            value: 'A21',
            label: 'A21'
          },
          {
            value: 'A22',
            label: 'A22'
          }
        ]
      }
    ]
  },
  {
    value: 'B',
    label: 'B',
    children: [
      {
        value: 'B1',
        label: 'B1',
        children: [
          {
            value: 'B11',
            label: 'B11'
          },
          {
            value: 'B12',
            label: 'B12'
          }
        ]
      },
      {
        value: 'B2',
        label: 'B2',
        children: [
          {
            value: 'B21',
            label: 'B21'
          },
          {
            value:'B22',
            label: 'B22'
          }
        ]
      }
    ]
  }
]
export default {
  data() {
    return {
      select1: '',
      select2: '',
      select3: '',
      options: options
    }
  },
  computed: {
    select1Options() {
      return this.options.map(item => ({
        value: item.value,
        label: item.label
      }))
    },
    select2Options() {
      const option = this.options.find(item => item.value === this.select1)
      if (option && option.children) {
        return option.children.map(item => ({
          value: item.value,
          label: item.label
        }))
      }
      return []
    },
    select3Options() {
      const option1 = this.options.find(item => item.value === this.select1)
      if (option1 && option1.children) {
        const option2 = option1.children.find(item => item.value === this.select2)
        if (option2 && option2.children) {
          return option2.children.map(item => ({
            value: item.value,
            label: item.label
          }))
        }
      }
      return []
    }
  }
}
</script>