想要實現級聯選擇器el-cascader和輸入框el-input共同組成的詳細地址，新增資料時彈出el-drawer巢狀el-form彈窗，然後在el-form新增資料提交後push到el-table裡，但是發現el-table裡面不顯示。
話不多說，直接上程式碼：
1.新增地址按鈕
<el-button type="primary" class="btnAdd" @click="dialog = true">新增訂單</el-button>
2.table表格
<el-table>
<el-table-column prop="address" label="收貨地址"></el-table-column>
</el-table>
3.el-drawer彈窗
<el-drawer
title="新增訂單"
:visible.sync="dialog"
:before-close="handleClose"
custom-class="demo-drawer"
ref="drawer"
size="35%"
>
<div class="demo-drawer__content">
<el-form :model="form" ref="form">
<el-form-item label="地址" prop="address" :label-width="formLabelWidth" v-model="form.address">
<el-col :span="12">
<el-cascader style="width: 100%" clearable size="large" :options="regionDatas" ref="cascaderAddr" :props="cateProps" v-model="form.address1" @change="handleChange"></el-cascader>
</el-col>
<el-col :span="12">
<el-input v-model="form.address2" placeholder="請輸入詳細地址" clearable maxlength="20" show-word-limit></el-input>
</el-col>
</el-form-item>
</el-form>
<div class="demo-drawer__footer">
<el-button @click="resetForm">重 置</el-button>
<el-button type="primary" @click="submitForm('form')">確 定</el-button>
</div>
</div>
</el-drawer>
form表單裡的樣式：
4.在script裡引入import {provinceAndCityData,regionData,provinceAndCityDataPlus,regionDataPlus,CodeToText,TextToCode,} from "element-china-area-data";
5.data裡的資料：
data() {
return {
tableData: [],
dialog: false,
form: {
address: "",
address1: [],
address2: "",
},
formLabelWidth: "80px",
regionDatas: regionData,
cateProps: {
value: "value",
label: "label",
children: "children",
},
addtions: [],
};
},
6.methods方法
methods: {
//級聯選擇器詳細資料
handleChange(value) {
this.form.address1 = value;
var name = "";
this.form.address1.map((item) => (name += CodeToText[item] + "")); //將省市區三個拼接一起
this.addtions.names = name;
},
//提交表單
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.tableData.push(this.form); //將新增資料push到dataList陣列中
this.tableData.forEach(element => {
element.address = this.addtions.names + this.form.address2;// 將級聯選擇器的地址和input裡的詳細地址合併賦值給table資料表中
});
this.dialog = false;
this.rewrite();
} else {
console.log("error submit!!");
return false;
}
});
},
handleClose(done) {
this.$confirm("確定要退出嗎？")
.then((_) => {
this.dialog = false;
done();
})
.catch((_) => {});
},
// 重置
resetForm(formName) {
this.$nextTick(() => {
this.$refs[formName].resetFields();
});
},
rewrite() {
this.form = {
username: "",
datetime: "",
goods: "",
consignee: "",
phone: "",
remarks: "",
address1: [],
address2: "",
};
},
},
最終效果：
