element <el-select>调用后台接口数据

需求:

在农药购买与使用去向记载情况表

 element <el-select>调用后台接口数据_第1张图片

 element <el-select>调用后台接口数据_第2张图片

 官方代码如下:

element <el-select>调用后台接口数据_第3张图片

 在HTML部分

element <el-select>调用后台接口数据_第4张图片

data部分

element <el-select>调用后台接口数据_第5张图片

js方法

您看这个,上面是调方法,.then下面是传参数.

 mounted () {
    let id = this.$route.params.id
    let disable = this.$route.params.disable
    this.init(id, disable)
    // this.getAllPdNo()
    this.getAllCrop()
    // this.getPesIdData()
  },
getAllCrop () {
      // this.dataForm = {}
      this.cropList = []
      let _this = this
      this.$http({
        url: '/pesticide/crop/queryAll',
        method: 'get',

      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          //  this.remoteOptions = data.data.map(item => {
          // return { value: `${item}`, label: `${item}` };
          // });
          this.cropList = data.list.map((item) => {
            return {
              value: item.id,
              label: item.cropName
            }

          })
          // console.log(this.cropList);
        }
      })
      // console.log(dictList);

    },

element <el-select>调用后台接口数据_第6张图片

这是我之前的思路

思路:

   用调用参数

element <el-select>调用后台接口数据_第7张图片      element <el-select>调用后台接口数据_第8张图片

       element <el-select>调用后台接口数据_第9张图片

我写的代码:

element <el-select>调用后台接口数据_第10张图片

然后data返回数据那块儿,应该是写一个请求获取这个crop作物表的url,获得到数据后填写到data中去,

在data中写一个数组

element <el-select>调用后台接口数据_第11张图片

请求数据的代码:

element <el-select>调用后台接口数据_第12张图片

element <el-select>调用后台接口数据_第13张图片

element <el-select>调用后台接口数据_第14张图片

element <el-select>调用后台接口数据_第15张图片

你可能感兴趣的:(html,html5,css)