快捷導(dǎo)航

vue選擇下拉框動態(tài)變化表單方式

更新時間：2022年08月02日 10:01:20 作者：風(fēng)如也

這篇文章主要介紹了vue選擇下拉框動態(tài)變化表單方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue選擇下拉框動態(tài)變化表單

場景

一個表單，在選擇某個下拉框時，動態(tài)添加選中該下拉框值對應(yīng)的輸入框或下拉框等。相當(dāng)于有部分輸入框或下拉框是動態(tài)變化的。

? ? <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
? ? ? <el-form-item label="名稱" prop="name">
? ? ? ? <el-input v-model="ruleForm.name" maxLength="20" "></el-input>
? ? ? </el-form-item>
? ? ? <el-form-item label="方式" prop="type">
? ? ? ? <el-select v-model="ruleForm.type" placeholder="請選擇方式" style="width:100%;" @change="changeType" >
? ? ? ? ? <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.type"></el-option>
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? ? <template v-for="(item, index) in Object.keys(ruleForm.info)">
? ? ? ? <el-form-item v-if="getNameByOptions(item)" :label="getNameByKey(item)" :prop="`info.${item}`" :key="index"
? ? ? ? ? :rules="{ required: true, message: `${getNameByKey(item)}不能為空`, trigger: 'change' }">
? ? ? ? ? <el-select v-model="ruleForm.info[item]" :placeholder="`請選擇${getNameByKey(item)}`" style="width:100%;" >
? ? ? ? ? ? <el-option v-for="(ele, key) in getNameByOptions(item)" :key="key" :label="ele.label" :value="ele.value"></el-option>
? ? ? ? ? </el-select>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item v-else :label="getNameByKey(item)" :prop="`info.${item}`" :key="index"
? ? ? ? :rules="{ required: true, message: `${getNameByKey(item)}不能為空`, trigger: 'blur' }">
? ? ? ? ? <el-input v-model="ruleForm.info[item]" maxLength="20"></el-input>
? ? ? ? </el-form-item>
? ? ? </template>
? ? </el-form>

注意

如果要驗證動態(tài)生成的表單，可以單獨(dú)添加 :rules="{ required: true, message:KaTeX parse error: Expected 'EOF', got '}' at position 46: …gger: 'change' }?"`。`prop` 要寫成對應(yīng)…{item}" 才會生效。

使用 Object.keys(ruleForm.info) 來遍歷是為了防止動態(tài)生成的表單不具有唯一性，即輸入某一項值，其余輸入框也會填入相同的值。

? data() {
? ? return {
? ? ? ruleForm: {
? ? ? ? type: '',
? ? ? ? name: '',
? ? ? ? remark: '',
? ? ? ? info: {}
? ? ? },
? ? ? rules: {
? ? ? ? name: [
? ? ? ? ? { required: true, message: '請輸入名稱', trigger: 'blur' }
? ? ? ? ]
? ? ? },
? ? ? curForm: [],
? ? ? typeList: [] // 數(shù)據(jù)源類型
? ? }
? },
? methods: {
?? ?// 選擇不同的接入方式，輸出不同的輸入框
? ? changeType(val) {
? ? ? this.ruleForm.info = {}
? ? ? this.typeList.forEach(item => {
? ? ? ? if (item.type === val) {
? ? ? ? ? this.curForm = item.props
? ? ? ? }
? ? ? })
? ? ? this.curForm.forEach(item => {
? ? ? ? this.$set(this.ruleForm.info, item.field, '')
? ? ? })
? ? },
? ? ?// 根據(jù) key 獲取 label
? ? getNameByKey (key) {
? ? ? return this.curForm.find(item => item.field === key).label
? ? },
? ? // 根據(jù) key 獲取 options
? ? getNameByOptions (key) {
? ? ? return this.curForm.find(item => item.field === key).options
? ? }
? }

數(shù)據(jù)格式不同的話，學(xué)會靈活變換

vue動態(tài)增減表單項

如圖，實現(xiàn)以下效果

通過點擊新增就會新增一個表單，刪除會刪除最后一個表單，也可以指定刪除哪個表單

代碼實現(xiàn)

<el-form ref="shopArr" :model="shopArr" :rules="shopRules">
        <table v-for="(item,index) in shopArr" :key="index" class="addTableShop">
          <tr>
            <td class="addTable-td1"><div class="table-item"><el-form-item label="1:" prop="settledPlatfoem" label-width="120px" /></div></td>
            <td class="addTable-td2">
              <el-radio-group v-model="item.settledType">
                <el-radio :label="1">淘寶</el-radio>
                <el-radio :label="2">京東</el-radio>
                <el-radio :label="3">天貓</el-radio>
                <el-radio :label="4">拼多多</el-radio>
                <el-radio :label="5">其他
                  <input v-if="item.settledType === 5" v-model="item.settledPlatfoem" placeholder="請輸入其他平臺" style="width: 105px; margin-left: 10px"/>
                </el-radio>
              </el-radio-group>
            </td>
            <td class="addTable-td1"><div class="table-item"><el-form-item label="2:" prop="shopName" label-width="120px" /></div></td>
            <td class="addTable-td2"><el-input v-model="item.shopName" /></td>
          </tr>
          <tr>
            <td class="addTable-td1"><div class="table-item"><el-form-item label="3:" prop="shopUrl" label-width="120px" /></div></td>
            <td class="addTable-td2"><el-input v-model="item.shopUrl" /></td>
            <td class="addTable-td1"><div class="table-item"><el-form-item label="4:" prop="operatingLicense" label-width="120px" /></div></td>
            <td class="addTable-td2"><el-input v-model="item.operatingLicense" /></td>
          </tr>
        </table>
        <el-button type="text" style="float: right" size="small" @click="addShop">新增</el-button>
        <el-button type="text" style="float: right" size="small" @click="deleteShop">刪除</el-button>
      </el-form>

method中

	// 添加表單
    add() {
      const item = {
        settledType: '',
        settledPlatfoem: '',
        shopName: '',
        shopUrl: '',
        operatingLicense: ''
      }
      this.shopArr.push(item)
    }，
    // 刪除表單
    deleteShop() {
      this.shopArr.splice(this.shopArr.length - 1, 1)
    },

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: