实现效果:选择一种交通工具则出现对应的席别列表。

state:

 seatList: {},//初始席别

最后state结果:

seatList: {
  '1':[{
  code:"101",
  name:'经济舱'
  },{
  code:"102",
  name:'公务舱'
  }],
  '2':[{
    code:"201",
    name:'商务座'
  },
  ...
  ]
},

getters:

seatListItem:(state)=>(key)=>{
    let list=state.common.seatList;
    return list[key]?list[key]:[]
  },

mutations:

SET_SEAT_LIST: (state,data) => {
      state.seatList = null;//问题出现在此处,对象要先置为null再赋值就可
      state.seatList= data;
    },

template:

<!-- 席别-->
          <el-select v-if="scope.row.vehicleCode&&seatListItem(scope.row.vehicleCode)" placeholder="" size="small"
                     class="selectWidth"
                     @change="handleChangeSeatType($event,scope.$index,receiptTableArr)"
                     v-model="scope.row.seatName"
                     :disabled="types == 'look'||!scope.row.vehicleCode"
                     v-bind:class="[types == 'look'?'numberStyleLocck':'','clearCursor']">
            <el-option
              v-for="(item,itenIndex) in seatListItem(scope.row.vehicleCode)"
              :label="item.value"
              :value="item"
              :key="itenIndex"
            ></el-option>
          </el-select>

computed:

computed: {
      ...mapState({
        vehicleList: state => state.vehicleList,//交通工具
        seatList: state => state.seatList,//席别
      }),
      ...mapGetters(['seatListItem'])
    },

methods:

getVehicleList(other){
      getVehicleSeatList({
        type:'JT',
        other 
      }).then((res)=>{
        if(res.data.code==200){
          const data = res.data.data;
          let seatList= this.$store.state.seatList;
              if(!seatList[other]){
                seatList[other]=data
              }
              this.$store.commit('SET_SEAT_LIST', seatList, params.other);
        } else {
          this.$message.warning('获取交通工具席别失败');
          return false
        }
      })
    },

最后发现,在mutations中要先将state设置为空然后再赋值,否则不更新。

Logo

前往低代码交流专区

更多推荐