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

Vue 实现数据的双向绑定

10.12

tavble
<el-col :lg="12">
        <el-form-item label="上级菜单" prop="menucode">
          
          <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-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>