element的el-form和el-table嵌套使用實(shí)現(xiàn)
一、element的el-form和el-table嵌套使用
要點(diǎn):
:model="addJsonForm"
給表單綁定數(shù)據(jù),addJsonForm
是傳入表單的數(shù)據(jù)對(duì)象- 注意表單數(shù)據(jù)對(duì)象
addJsonForm
的定義:屬性params
(可按需求命名)為表單內(nèi)嵌套的表格的顯示數(shù)據(jù),數(shù)組類(lèi)型; 屬性addJsonRules
,為表單綁定的驗(yàn)證規(guī)則。 el-table
: 采用自定義列模板,可自定義表頭,el-form
: 表單項(xiàng)綁定對(duì)應(yīng)的字段名和校驗(yàn)規(guī)則:prop="'params.' + scope.$index + '.name'"
綁定傳入Form 組件的 model 中對(duì)應(yīng)的字段name
:rules="addJsonForm.addJsonRules.name"
綁定表單驗(yàn)證規(guī)則
<template> <div> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 100%" border> <el-table-column type="selection" width="55" align="center"> </el-table-column> <el-table-column align="center"> <template slot="header" slot-scope="scope"> <span style="color:#2d65dc;">成員名稱</span> <i style="color:#F56C6C;">*</i> </template> <template slot-scope="scope"> <el-form-item :prop="'params.' + scope.$index + '.name'" :rules="addJsonForm.addJsonRules.name" > <el-input type="text" v-model="scope.row.name" autocomplete="off" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column align="center"> <template slot="header" slot-scope="scope"> <span style="color:#2d65dc;">成員值</span> <i style="color:#F56C6C;">*</i> </template> <template slot-scope="scope"> <el-form-item :prop="'params.' + scope.$index + '.value'" :rules="addJsonForm.addJsonRules.value" > <el-input type="text" v-model="scope.row.value" autocomplete="off" ></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> </div> </template> <script> export default { data() { return { addJsonForm: { params: [ { name: "", value: "" } ], addJsonRules: { name: [ { required: true, message: "請(qǐng)輸入成員名稱", trigger: "blur" } ], value: [ { required: true, message: "成員值不能為空", trigger: "blur" } ] } } }; } }; </script>
二、應(yīng)用實(shí)例
點(diǎn)擊添加的時(shí)候,動(dòng)態(tài)增加表格的行數(shù),點(diǎn)擊刪除的時(shí)候,刪除表格的行數(shù)據(jù)。
近期更新
: 因評(píng)論區(qū)問(wèn)到后續(xù)如何用 Form 表單的 resetFields 方法,這里就新加一個(gè)重置功能。
<template> <div> <el-button @click="showPopup">點(diǎn)擊顯示彈框</el-button> <h3> dataSourceJson: <span>{{ FormInAddPopup.dataSourceJson }}</span> </h3> <el-dialog class="comn_dialog" title="添加數(shù)據(jù)" :visible.sync="addJsonVisible" width="415px" top="23vh" > <el-button @click="addTableItem">添加</el-button> <el-button @click="delTableItem">刪除</el-button> /* 近期更新 */ <el-button @click="resetForm('myForm')">重置</el-button> <el-form :model="addJsonForm" ref="addJsonForm" :rules="addJsonForm.addJsonRules" :inline="true" label-width="108px" > <el-table :data="addJsonForm.params" style="width: 100%" border @selection-change="addJsonSelectionChange" > <el-table-column type="selection" width="55" align="center"> </el-table-column> <el-table-column align="center"> <template slot="header" slot-scope="scope"> <span style="color:#2d65dc;">成員名稱</span> <i style="color:#F56C6C;">*</i> </template> <template slot-scope="scope"> <el-form-item :prop="'params.' + scope.$index + '.name'" :rules="addJsonForm.addJsonRules.name" > <el-input type="text" v-model="scope.row.name" autocomplete="off" ></el-input> </el-form-item> </template> </el-table-column> <el-table-column align="center"> <template slot="header" slot-scope="scope"> <span style="color:#2d65dc;">成員值</span> <i style="color:#F56C6C;">*</i> </template> <template slot-scope="scope"> <el-form-item :prop="'params.' + scope.$index + '.value'" :rules="addJsonForm.addJsonRules.value" > <el-input type="text" v-model="scope.row.value" autocomplete="off" ></el-input> </el-form-item> </template> </el-table-column> </el-table> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="resetAddJsonPopup">取 消</el-button> <el-button type="primary" @click="submitAddJsonPopup">確定</el-button> </span> </el-dialog> </div> </template> <script> export default { data() { return { addJsonVisible: false, addJsonMultiple: [], FormInAddPopup: { dataSourceJson: "" // 獲取到的dataJson,顯示為 [{name:"",value:""},{name:"",value:""}] 的格式 }, tabItemId: 1, // 表格數(shù)據(jù)的 id addJsonForm: { params: [ { name: "", value: "", tabItemId: 1 // 彈框中,刪除空行的唯一標(biāo)志,默認(rèn)從1開(kāi)始 } ], addJsonRules: { name: [ { required: true, message: "請(qǐng)輸入成員名稱", trigger: "blur" } ], value: [ { required: true, message: "成員值不能為空", trigger: "blur" } ] } } }; }, methods: { // 近期更新 resetForm(formName) { this.$refs[formName].resetFields(); }, RndNum(n) { // 生成隨機(jī)數(shù) let rdmNum = ""; for (let i = 0; i < n; i++) { rdmNum += Math.floor(Math.random() * 10); // [0,10)的整數(shù) } return rdmNum; }, showPopup() { this.addJsonVisible = true; }, addJsonSelectionChange(val) { this.addJsonMultiple = val; }, resetAddJsonPopup() { //關(guān)閉 固定值彈窗 this.$set(this.addJsonForm, "params", []); this.addJsonVisible = false; }, submitAddJsonPopup() { //保存 固定值 if (this.addJsonMultiple.length > 0) { this.$refs["addJsonForm"].validate(valid => { if (valid) { let result = []; this.addJsonMultiple.map(val => { this.$delete(val, "tabItemId"); // 刪除tabItemId屬性 result.push(val); }); result.length ? (result = JSON.stringify(result)) : (result = ""); this.FormInAddPopup.dataSourceJson = result; this.addJsonVisible = false; } else { return false; } }); } else { this.$message.warning("請(qǐng)選擇要保存的數(shù)據(jù)"); } }, addTableItem() { this.tabItemId = "T" + this.RndNum(6); //生成以T開(kāi)頭的七位隨機(jī)數(shù) this.addJsonForm.params.push({ name: "", value: "", tabItemId: this.tabItemId }); }, delTableItem() { // 確認(rèn)刪除 if (this.addJsonMultiple.length > 0) { let arrs = []; let ids = this.addJsonMultiple.map(val => val.tabItemId); //拿到選中的數(shù)據(jù)id, this.addJsonForm.params.forEach(item => { if (!ids.includes(item.tabItemId)) { // 當(dāng)id在params中,表示數(shù)據(jù)被選中,該將其刪除,即將不被選中的保留 arrs.push(item); } }); this.addJsonForm.params = arrs; } else { this.$message.warning("請(qǐng)選擇要?jiǎng)h除的數(shù)據(jù)"); } } } }; </script>
到此這篇關(guān)于element的el-form和el-table嵌套使用實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element el-form和el-table嵌套內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解axios 全攻略之基本介紹與使用(GET 與 POST)
本篇文章主要介紹了axios 全攻略之基本介紹與使用(GET 與 POST),詳細(xì)的介紹了axios的安裝和使用,還有 GET 與 POST方法,有興趣的可以了解一下2017-09-09vue編寫(xiě)的功能強(qiáng)大的swagger-ui頁(yè)面及使用方式
swagger是一種標(biāo)準(zhǔn)的數(shù)據(jù)格式的定義,對(duì)于不同語(yǔ)言進(jìn)行實(shí)現(xiàn)一些注解API式的東西,能快速生成這種描述restful格式的api信息的json串,本文給大家詳細(xì)介紹vue編寫(xiě)的功能強(qiáng)大的swagger-ui頁(yè)面,感興趣的朋友跟隨小編一起看看吧2022-02-02前端Vue頁(yè)面中展示本地圖片簡(jiǎn)單代碼示例
今天遇到一個(gè)在vue文件中引入本地圖片的問(wèn)題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁(yè)面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下2023-12-12利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能
vue3正式版已經(jīng)發(fā)布大半年了,咱也得緊跟時(shí)代潮流,vue3帶來(lái)的很多改變,下面這篇文章主要給大家介紹了關(guān)于利用Vue3實(shí)現(xiàn)拖拽定制化首頁(yè)功能的相關(guān)資料,需要的朋友可以參考下2022-05-05