Vue.js:Select--Option >下拉框绑定和取值
遇到了这个解决了,所以记录一下:1.Vue.js2.https://www.iviewui.com/components/select 完成vue.js下拉框选择绑定与取值,实现效果图如下: template代码 <template><div><Form :model="formItem" r...
·
遇到了这个解决了,所以记录一下:
1.Vue.js
2.https://www.iviewui.com/components/select
完成vue.js下拉框选择绑定与取值,实现效果图如下:
template代码
<template>
<div>
<Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80">
<FormItem label="完成状态 : " prop="sendValue">
<Select style="width:200px" v-model="formItem.sendValue">
<Option v-for="item in formItem.stateList" :value="item.value" :key="item.value" name="sendValue">{{
item.label }}
</Option>
</Select>
</FormItem>
</Form>
</div>
</template>
js代码
<script type="text/ecmascript-6">
export default {
mounted() {
this.getData();
},
methods: {
/**
* 提交数据
* @param name
*/
submit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
let temp = {};
var url = this.ServerIp + this.API.editDemand + "/d_id/" + this.$route.query.d_id;
var that = this;
var params = {};
params.d_create_user = this.formItem.d_create_user;
params.d_progress = this.formItem.d_progress,
params.d_status = this.formItem.sendValue,
params.edit = 1;
this.modal_loading = true;
console.log(params.de_enclosure);
this.$http({
method: 'post',
url: url,
data: params,
}).then((res) => {
this.modal_loading = false;
if (res.data.success) {
that.$Message.success('需求编辑成功');
this.$refs[name].resetFields();
//路由跳转
// this.$router.push({path: '/forumCategoryList'});
} else {
that.$Message.error(res.data.result);
}
});
}
});
},
data() {
return {
modal_loading: false,
questionImageIsShow: false,
formItem: {
d_title: "",
u_phone: "",
stateList: [
{
value: '0',
label: '待分配'
},
{
value: '1',
label: '开发中'
},
{
value: '2',
label: '已完成'
},
{
value: '3',
label: '停用'
},
{
value: '4',
label: '已变更'
}
]
}
}
</script>
上述代码中this.formItem.sendValue获取我们最终选中的值,可以做其他的操作了。
更多推荐
已为社区贡献7条内容
所有评论(0)