vue 動態添加el-input的實現邏輯
一、效果圖
二、實現邏輯
- 將需要動態添加的表單項項的綁定值存為一個數組
- 以循環的方式展示form表單
- 點擊`+`按鈕觸發事件,向數組中新加一個item
- 點擊`-`按鈕觸發事件,根據循環的得到的index來刪除數組中相對應位置的item三、代碼實現
<template> <div> <el-button @click="isDilogShow = true" plain>動態添加input</el-button> <el-dialog title="特工安排" :visible.sync="isDilogShow" :close-on-click-modal="false" width="400px" > <el-form ref="form" :model="form"> <el-form-item> <div v-for="(item, index) in List" :key="index" class="content"> <el-form-item> <el-input class="numrule" type="number" style="max-width: 130px" v-model.number="item.num" placeholder="請輸入代號" @input=" (val) => { handleNumChange(val, index) } " ></el-input> <span>搭檔為</span> <el-select v-model="item.name" placeholder="請選擇" style="max-width: 130px" > <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.name" > </el-option> </el-select> <!-- 若表單中沒有值則不可以新增item(可根據自己的需求進行更改哦) --> <span v-if="index === 0" :class=" item.num === null || item.name === '' ? 'change-icon-add' : 'change-icon' " ><i :style="{ pointerEvents: item.num === null || item.name === '' ? 'none' : 'auto', }" class="el-icon-circle-plus-outline" @click="addItem()" ></i ></span> <span v-else class="change-icon" @click="deleteItem(index)" ><i class="el-icon-remove-outline"></i ></span> </el-form-item> </div> </el-form-item> <el-form-item style="text-align: right;"> <el-button @click="isDilogShow = false">取消</el-button> <el-button type="primary" @click="onSubmit">確認</el-button> </el-form-item> </el-form> </el-dialog> </div> </template>
<script> export default { name: "About", data() { return { isDilogShow: false, form: { name: "", }, List: [{ num: "", name: "" }], userList: [ { id: 1, name: "麻雀" }, { id: 2, name: "夜鶯" }, { id: 3, name: "百靈" }, ], } }, methods: { handleNumChange(v, i) { console.log(v) console.log(i) }, onSubmit() { console.log("submit!") }, // 新增任務分配 addItem() { this.List.push({ num: "", name: "", }) }, deleteItem(i) { this.List.splice(i, 1) }, }, } </script>
<style lang="scss"> .content { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; span{ margin: 0 8px; } .change-icon { font-size: 26px; cursor: pointer; } // 點擊事件是否可用 ----> pointer-events:none; .change-icon-add { font-size: 26px; cursor: no-drop; } } .numrule { input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } /* Firefox瀏覽器 */ input[type="number"] { -moz-appearance: textfield; } } </style>
到此這篇關於vue 動態添加el-input的文章就介紹到這瞭,更多相關vue 動態添加el-input內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue前端高效開發之列表渲染指令
- vue element el-form 多級嵌套驗證的實現示例
- Vue3+Element+Ts實現表單的基礎搜索重置等功能
- vue element實現表格增加刪除修改數據
- vue將數字轉為中文大寫金額方式