首先介绍一下v-combobox组件,这个组件是下拉框与输入框的完美结合。用户不仅可以进行下拉框选择,还可以自定义输入。
详细API可查看该链接:https://vuetifyjs.com/zh-Hans/api/v-combobox/
项目实现要求,页面展示出的是中文字段,而与后端交互,数据则是与其对应的英文字段
<v-simple-table class="table-wrapper" dense>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">
名称
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in mappings" :key="item.id">
<td style="border-bottom: 0 none">
<v-combobox v-model="item.claim" :items="claimDatas">
</v-combobox>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
let claimObj = {
userid: "成员ID",
userclaim: "成员声明"
};
export default {
data(){
return {
mappings:[],
claimDatas: ["成员ID","成员声明"],
}
},
created(){
this.getCurIdData(this.$route.params.id)
},
methods:{
//获取mappings列表数据
getCurIdData(id) {
this.$http
.get(`/api/${id}`)
.delegateTo(api_request)
.then(data => {
this.mappings = data.mappings.map(item => {
item.claim =
claimObj[item.claim] !== undefined
? claimObj[item.claim]
: item.claim;
return item;
});
}
});
},
//点击保存
saveMapping() {
let newMapDatas = this.mappings.map(item => {
for (let key in claimObj) {
item.claim = claimObj[key] === item.claim ? key : item.claim;
}
return item;
});
let params = {
mappings: newMapDatas
};
this.$http
.patch(
`/api/${this.$route.params.id}`,
params
)
.delegateTo(api_request)
.then(() => {
return "保存成功";
})
.catch(({ code, message }) => {
throw `保存失败:${this.$t("api." + code)}, 额外信息: ${"api." +
JSON.stringify(message)}`;
})
.delegateTo(this.$snackbar.delegate);
},
}
}