【初次使用vue3 、element plus 渲染el-select 出现渲染不成功的问题】

主要代码

<el-row :gutter="20">
    <el-col :span="4"><el-input v-model="input" placeholder="请输入项目名称" @blur="blurName" /></el-col>
    <el-col :span="4"
      ><el-select v-model="value" class="m-2" placeholder="选择分类" @blur="blurCate"> <el-option v-for="item in dataForm.cateList" :key="item.value" :label="item.label" :value="item.value" /> </el-select
    ></el-col>
    <el-select v-model="dataForm.depId" multiple collapse-tags placeholder="请选择部门" style="width: 240px">
      <el-option v-for="item in dataForm.depList" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-col :span="4"> <el-date-picker v-model="value2" type="datetime" @blur="blurDate" placeholder="请选择开始时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s a" /></el-col>
    <el-col :span="8"></el-col>
    <!-- 列表展示 -->
  </el-row>

  const dataForm = {
  depId: "",
  depList: [
    {
      id: "",
      value: "",
      label: ""
    }
  ],
  cateList: [
    {
      id: "",
      value: "",
      label: ""
    }
  ]
}
//查询分类
const getCate = () => {
  baseService.get(`rp/projectcate/list`).then((res) => {
    dataForm.cateList.length = 0;
     for (let index = 0; index < res.data.length; index++) {
      dataForm.cateList.push({
        id: res.data[index].id,
        value: res.data[index].id,
        label: res.data[index].name
      });
    }

    console.log("查询分类===>", dataForm.cateList);
  });
};
const init = () => {
  //查询二级部门
  getDepList();
  //查询分类
  getCate();
};
init();

1. 页面显示
   

解决办法

const dataForm = reactive({
  depId: "",
  depList: [
    {
      id: "",
      value: "",
      label: ""
    }
  ],
  cateList: [
    {
      id: "",
      value: "",
      label: ""
    }
  ]

其实就是没写 reactive ,第一次用，还不熟悉，我真服了

ps: 大佬勿喷，低级错误，我已经自我检讨过了。