vuetify —— v-combobox实战

最新推荐文章于 2025-04-14 14:21:10 发布

原创最新推荐文章于 2025-04-14 14:21:10 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客介绍了如何在Vuetify框架中使用v-combobox组件，实现用户既能从下拉选项中选择，也能自定义输入。项目需求是页面显示中文字段，而与后端交互时使用英文字段。博客展示了具体的代码实现，包括数据双向绑定、数据转换以及保存操作，确保在保存时将中文字段转换回英文字段以便于与后台通信。

首先介绍一下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);
	    },
  	}
}