快捷導(dǎo)航

vue?elementui動態(tài)添加el-input實例代碼

更新時間：2023年06月27日 09:29:37 作者：季布，

最近遇到一個新的需求,需要動態(tài)添加el-input,這篇文章主要給大家介紹了關(guān)于vue?elementui動態(tài)添加el-input的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

點擊加號或者減號按鈕可以實現(xiàn)動態(tài)增減Input輸入框

      <el-form label-width="auto" :model="infomation">
            <div v-for="(item, index) in infomation.infolist" :key="index">
              <el-form-item label="學(xué)校名稱">
                <el-select
                  v-model="item.schoolname"
                  clearable
                  placeholder="Select"
                  filterable
                  allow-create
                  collapse-tags-tooltip
                  default-first-option
                  :reserve-keyword="false"
                >
                  <el-option
                    v-for="(item, index) in school_list"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
                <el-form-item label="選擇專業(yè)">
                  <el-select
                    v-model="item.major"
                    placeholder="Select"
                    multiple
                    collapse-tags
                    allow-create
                    collapse-tags-tooltip
                    filterable
                    default-first-option
                    :reserve-keyword="false"
                  >
                    <el-option
                      v-for="(item, index) in major_list"
                      :key="index"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="鏈接">
                  <el-input v-model="item.link" />
                </el-form-item>
              <el-form-item>
                <el-button @click="addItem()"> + </el-button>
                <el-button
                  @click="deleteItem(index)"
                >
                  –
                </el-button>
              </el-form-item>
            </div>
          </el-form>

<script>
import request from "../utils/request";
export default {
  name: "InView",
  data() {
    return {
      infomation: {
        infolist: [{ schoolname: "", major: "", link: "" }],
      },
    };
     methods: {
     // 新增任務(wù)分配
    addItem() {
        let that = this;
        that.infomation.infolist.push({
          schoolname: "",
          major: "",
          link: "",
        });
}，
	    deleteItem(i) {
        if (this.infomation.infolist.length <= 1) {
          return false;
        }
        this.infomation.infolist.splice(i, 1);
  },
</script>

還有另一種場景: 一個學(xué)校對應(yīng)多個專業(yè)，而多個專業(yè)會對應(yīng)多個鏈接

<template>
  <div>
    <el-form label-width="auto" :inline="true">
      <div v-for="(item, schoolIndex) in schoolList" :key="schoolIndex" class="zhuanye">
        <el-form-item label="學(xué)校名稱">
          <el-select v-model="item.schoolname" clearable placeholder="Select" filterable allow-create
            collapse-tags-tooltip default-first-option :reserve-keyword="false">
            <el-option v-for="(item, index1) in school_list" :key="index1" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <div>
          <div v-for="(item, zhuanyeIndex) in item.zhuanye" :key="zhuanyeIndex" class="zhuanye">
            <el-form-item label="選擇專業(yè)">
              <el-select v-model="item.major" placeholder="Select" multiple collapse-tags allow-create
                collapse-tags-tooltip filterable default-first-option :reserve-keyword="false">
                <el-option v-for="(item, index2) in major_list" :key="index2" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="addzhuanye(schoolIndex)"> + 專業(yè)</el-button>
              <el-button @click="deletezhuanye(schoolIndex, zhuanyeIndex)">
                –
              </el-button>
            </el-form-item>
            <el-form-item label="鏈接">
              <el-input v-model="item.link" style="width: 180px" size="mini" />
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <el-button @click="addSchool()"> + 學(xué)校</el-button>
          <el-button @click="deleteSchool(schoolIndex)">
            –
          </el-button>
        </el-form-item>
      </div>
    </el-form>
</div>
</template>
<script>
export default {
  name: "InView",
  data() {
    return {
      schoolList: [{ schoolname: '學(xué)校1', zhuanye: [{ major: '', link: '' }] }],
      school_list: [],
      major_list: []
    };
  },
  created() {
  },
  methods: {
    addzhuanye(index) {
      this.schoolList[index].zhuanye.push({ major: '', link: '' })
    },
    deletezhuanye(schoolIndex, zhuanyeIndex) {
      this.schoolList[schoolIndex].zhuanye.splice(zhuanyeIndex, 1)
    },
    addSchool() {
      this.schoolList.push({ schoolname: '默認(rèn)添加學(xué)校', zhuanye: [{ major: '', link: '' }] })
    },
    deleteSchool(index) {
      this.schoolList.splice(index, 1)
    }
  },
};
</script>
<style scoped>
.zhuanye {
  display: flex;
}
</style>

總結(jié)

到此這篇關(guān)于vue elementui動態(tài)添加el-input的文章就介紹到這了,更多相關(guān)elementui動態(tài)添加el-input內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: