新建页面传值与编辑页面获取的值的区别

79 阅读1分钟

新建页面

当新建页面,提交按钮时的值和编辑页面的值,他们的内容是一样的,但是获取的方式是不一样的。

编辑页面

编辑页面获取的数据是,当点击提交按钮时,上传数据,然后就会获得一些内容,我们的编辑数据就是从这个内容获取的。

选择项的数据

选项

<el-form-item label="所属分类" prop="classList">
    <el-select v-model="queryParams.oneClassificationId">
   <el-option v-for="dict in classList" :key="dict.id" :label="dict.name" :value="dict.id" />
   </el-select>
  </el-form-item>
  • 注释:上述代码中classList是一个数组:[];
    • 这个option是什么东西?
      • 就是点击后里面的选项,这个option就是里面的选项,这个label就是选项的名称;
    • 上面的v-model的值,就是<el-option>里面的value,就是从接口获得的id;
    • 所以queryParams.oneClassificationId的值,就是这个dict.id;
    • 从接口获取classList,
    	// 查询三级选择列表
    _getLevel(data = { level: 1 }) {
      getLevel(data).then(res => {
    	 const { level } = data
    	 if (level == 1) {
    	 this.classList = res.data
    	 } else if (level == 2) {
    	 this.twoClassList = res.data
    	 } else if (level == 3) {
    	 this.threeClassList = res.data
    	 }
    	})
    	},
    
    • 这个this.classList打印出来的结果是一个数组,里面有很多对象;

image.png

  • 内容详细展开;

image.png

  • <el-elect>里面的v-model和<el-option>里面的dict的关联是什么;
  • v-model里面的值queryParams.oneClassificationId,是被选中的el-option的value属性值;