Vue (下拉列表)实现数据的双向绑定

Vue 实现数据的双向绑定

10.12

tavble
<el-col :lg="12">
<el-form-item label="上级菜单" prop="menucode">
<!-- <el-input v-model="form.menucode" placeholder="请输入所属菜单" /> -->
<el-select v-model="form.menucode" class="m-2" placeholder="Select">
<el-option
v-for="item in menuSelect"
:key="item.menuId"
:label="item.menuName"
:value="item.menuId"
/>
<!--
下拉列表的创建-->
<script>
const menuSelect = ref([]) <!--
为menuSelect 赋值常量-->
<!--
得到列表-->
function getList(){
loading.value = true
listSysAutoTable(queryParams).then(res => {
if (res.code == 200) {
dataList.value = res.data.result
total.value = res.data.totalNum
loading.value = false
}
})
}
<!--
关闭dialog-->
function cancel(){
open.value = false
reset()
}
<!--
重置表单-->
function reset() {
form.value = {
tablename: undefined,
tablecode: undefined,
tabledate: undefined,
creator: undefined,
createtime: undefined,
menucode: undefined,
};
proxy.resetForm("formRef")
}
<!--
查询表单-->
function handleQuery() {
queryParams.pageNum = 1
getList()
}
<!--
添加表单-->
function handleAdd() {
columns.value = [];
reset();
open.value = true
title.value = '添加'
opertype.value = 1
columns.value.push({
columnComment: "",
columnId: 29,
columnName: "id",
});
}
<!--
删除按钮操作-->
function handleDelete(row) {
const Ids = row.id || ids.value
proxy.$confirm('是否确认删除参数编号为"' + Ids + '"的数据项？')
.then(function () {
return delSysAutoTable(Ids)
})
.then(() => {
handleQuery()
proxy.$modal.msgSuccess("删除成功")
})
.catch(() => {})
}
<!--
生成按钮操作-->
function handleGenerate(row) {
columns.value = [];
reset()
const id = row.id || ids.value
generateSysAutoTable(row).then((res) => {
proxy.$modal.msgSuccess("生成成功")
open.value = false
getList()
})
.catch(() => {})
}
<!--
修改按钮操作
-->
function handleUpdate(row) {
columns.value = [];
reset()
const id = row.id || ids.value
getSysAutoTable(id).then((res) => {
const { code, data } = res
if (code == 200) {
open.value = true
title.value = "修改数据"
opertype.value = 2
form.value = {
...data,
}
columns.value = JSON.parse(form.value.tabledate);
form.value.menucode = Number(form.value.menucode);
}
})
}
<!--
得到选择按钮
-->
function getSelctMenu() {
listMenu({ menuTypeIds: 'M' }).then((response) => {
menuSelect.value = response.data;
})
}
<!--
得到选择按钮并返回
-->
getSelctMenu();
function getmenuName(code) {
return menuSelect.value.filter(e => e.menuId === Number(code))[0]?.menuName;
}
<!--
表单提交
-->
function submitForm() {
form.value.tabledate = JSON.stringify(columns.value);
form.value.menucode = form.value.menucode + "";
proxy.$refs["formRef"].validate((valid) => {
if (valid) {
if (form.value.id != undefined && opertype.value === 2) {
updateSysAutoTable(form.value).then((res) => {
proxy.$modal.msgSuccess("修改成功")
open.value = false
getList()
})
.catch(() => {})
} else {
addSysAutoTable(form.value).then((res) => {
proxy.$modal.msgSuccess("新增成功")
open.value = false
getList()
})
.catch((err) => {
//TODO 错误逻辑
})
}
}
})
}
<!--
重置查询操作
-->
function resetQuery(){
proxy.resetForm("queryRef")
handleQuery()
}
</script>
table modle
<el-col :lg="12">
<el-form-item label="上级菜单" prop="menucode">
<!-- <el-input v-model="form.menucode" placeholder="请输入所属菜单" /> -->
<el-select v-model="form.menucode" class="m-2" placeholder="Select">
<el-option
v-for="item in menuSelect"
:key="item.menuId"
:label="item.menuName"
:value="item.menuId"
/>
</el-select>
</el-form-item>
</el-col>

最后

以上就是彪壮吐司为你收集整理的Vue (下拉列表)实现数据的双向绑定的全部内容，希望文章能够帮你解决Vue (下拉列表)实现数据的双向绑定所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。