在專案中遇到一個這樣的問題，一個表單中有多選和單選，并且其中或許還會有 others 選項，當選中 others時，我們是可以自定義輸入內容并提交到表單的，
開始看到這個問題的時候感覺是很懵的，終于在最后經過我不斷的努力下找到大佬解決了這個問題，
在 vue 框架下 我用到的是 element-ui 組件庫，因此看到需求，我就想到了 radio 和 checkbox，然后再增加判斷是多選還是單選這不就輕輕松松搞定了嘛！于是，我就高高興興的想著三下五除二去解決掉這個小case，果不其然，最后還是淚流滿面的聽大佬講解，
其實按照上述方法能把頁面的展示實作出來，可當時忽略了 v-model 值的影響，
假如，我們從后臺介面獲取到的值為 data
let question = data;
this.select = [...question];
question.forEach((item) => {
if (item.value.some((i) => i.select_type == "1")) {
this.$set(this.input, [item.后臺接收欄位值], "");
}
if (item.type === "1") {
// 單選
this.$set(this.ruleForm, [item.后臺接收欄位值], "");
if (item.mandatory == "1") {
this.$set(this.rules, [item.后臺接收欄位值], {
required: true,
message: "Required fields cannot be blank!",
trigger: "blur",
});
}
} else if (item.type === "2") {
// 多選
this.$set(this.ruleForm, [item.后臺接收欄位值], []);
if (item.mandatory == "1") {
this.$set(this.rules, [item.后臺接收欄位值], {
required: true,
message: "Required fields cannot be blank!",
trigger: "blur",
});
}
}
});
其中 mandatory來判斷表單中是否為必填項并提示相關資訊，
這樣的話就可以解決 v-model 值重復的問題， v-model 系結 ruleform[item.后臺接收欄位值]，
注意，在提交表單的時候：
this.$refs.ruleForm.validate((valid) => {
let params = {};
this.select.forEach((item) => {
if (item.type === "1") {
// 單選
if (
item.value.some(
(i) =>
i.title === this.ruleForm[item.后臺接收欄位值] &&
i.select_type == "1"
)
) {
params[item.后臺接收欄位值] =
this.ruleForm[item.后臺接收欄位值] + " " + this.input[item.后臺接收欄位值];
} else {
params[item.后臺接收欄位值] = this.ruleForm[item.后臺接收欄位值];
}
} else if (item.type === "2") {
// 多選
params[item.后臺接收欄位值] = [];
this.ruleForm[item.后臺接收欄位值].forEach((i) => {
let filter = item.value.filter((j) => j.title === i);
if (filter[0].select_type == "1") {
params[item.后臺接收欄位值].push(i + " " + this.input[item.后臺接收欄位值]);
} else {
params[item.后臺接收欄位值].push(i);
}
});
}
});
解決選中 others 時自定義內容提交，
第一次博客，不足之處請指教！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/263476.html
標籤：其他
下一篇：Airtest學習（一）