vue3 element plus 关于单选框/多选框回显数据

最新推荐文章于 2024-06-03 16:25:31 发布

天空的城_

最新推荐文章于 2024-06-03 16:25:31 发布

阅读量1k

点赞数 7

分类专栏： vue等前端知识文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56553975/article/details/135649271

版权

vue等前端知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章讲述了在Vue应用中，如何使用el-select组件与reactive状态管理配合，当回显数据时，处理数组类型的选项显示。涉及到v-model绑定、axios请求获取数据并更新select组件的内容。

摘要由CSDN通过智能技术生成

代码

<el-form-item label="分类名称" prop="depIds">
      <el-select v-model="backInfo.category" placeholder="选择分类" style="width: 240px">
        <el-option v-for="item in backInfo.categoryList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

    <el-form-item label="适合部门" prop="depIds">
      <el-select v-model="backInfo.depIds" multiple placeholder="下拉多选框，可搜索" style="width: 240px" filterable>
        <el-option v-for="item in backInfo.depDataSourceList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>

const backInfo = reactive({
  id: "",
  name: "",
  cateId: "",
  categoryList: [{}],
  depIds: [],
  depDataSourceList: [{}],
  startTime: "",
  endTime: "",
  des: "",
  funds: 0.0,
  difficulty: 0,
  status: 0,
  createName: "",
  background: "",
  content: "",
  achievementsAndProspects: "",
  remarks: "",
  files: []
});

const updateInfo = (row: { id: "" }) => {
  dialogFormVisible.value = true;
  //回显数据
  baseService.get(`/rp/projectinfo/getInfoById/${row.id}`).then((res) => {
    Object.assign(backInfo, res.data);
    backInfo.difficulty = Number(res.data.difficulty);
    backInfo.status = Number(res.data.status);
  });
  //回显分类
  baseService.get(`/sys/dept/findByIndexTwo`).then((res) => {
    // 初始化 desList 数组为空
    backInfo.depDataSourceList.length = 0;
    // 使用 push 方法向 desList 数组中添加元素
    for (let index = 0; index < res.data.length; index++) {
      backInfo.depDataSourceList.push({
        id: res.data[index].id,
        value: res.data[index].id,
        label: res.data[index].name
      });
    }
  });
  //回显分类
  baseService.get(`rp/projectcate/list`).then((res) => {
    backInfo.categoryList.length = 0;
    for (let index = 0; index < res.data.length; index++) {
      backInfo.categoryList.push({
        id: res.data[index].id,
        value: res.data[index].id,
        label: res.data[index].name
      });
    }
  });
};