vue：从缓存中获取数据，以下拉框的形式显示到页面并保存到数据库中

本文主要是介绍vue：从缓存中获取数据，以下拉框的形式显示到页面并保存到数据库中，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.从缓存中获取数据

   mounted() {
      getMadInfo(this.query.agy.madCode).then((res = {}) => {
        let exAdd  = _.filter(res.EXPECO,o => {
          if(o.code === '30101' || o.code == '30102' || o.code == '30107' || o.code == '30199' || o.code == '30239' || o.code == '30309'){
            return o.code + o.name;
          }
        });
        this.expecoAdd =exAdd.map((item) => {
          return {
            label:item.name,
            value:item.code
          }
        })
      });
    }

2.以下拉框的形式显示在页面

  <el-table-column prop="unitGrantCode" width="120" label="单位自发分类">
          <template slot-scope="scope">
            <el-select  size="mini" style="width: 100px"  v-model="scope.row.unitGrantCode" @change="handleUnitChange(scope.row) ">
              <el-option
                v-for="item in expecoAdd"
                :key="item.value"
                :label="item.value + ' ' + item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span>
              {{scope.row.unitGrantCode}} {{scope.row.unitGrantName}}
            </span>
          </template>
        </el-table-column>

3.保存到数据库中

 //单位自发分类的点击事件，将页面上的值赋值给数据库中的字段
      handleUnitChange(row){
       _.forEach(this.expecoAdd,o=>{
        if(row.unitGrantCode == o.value){
          row.unitGrantName = o.label;
        }
       });
      },

这篇关于vue：从缓存中获取数据，以下拉框的形式显示到页面并保存到数据库中的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！