Ant Design Vue2 实现列表中多行下拉框根据后台获取的数据展示对应的默认选项

首先是实现效果：

1. 需求

看似简单的一个表格，我这里其实有相当多的业务逻辑，其中每一列的数据都来自不同的接口，调接口根据返回的数据判断功能下拉菜单的可选项，切换不同的传感器等……本文只分享根据获取的数据，将映射的文本默认展示到每一列的实现：

2. 代码实现

我的实际需求是有多个设备切换，这里只展示第一个设备供参考：

<template>
  <div>
    <div v-show="sensorIndex === 0">
      <a-table
        ref="sensor"
        :dataSource="loadData"
        :loading="loading"
        :columns="columns"
        :row-key="(record) => record.id"
      >
        <span slot="function" slot-scope="text, record">
          <a-form-item>
            <a-select
              style="width: 120px"
              dropdownClassName="la"
              v-model="selectedOptions.sensor1[record.functionKey]"
            >
              <a-icon
                slot="suffixIcon"
                type="caret-down"
                style="font-size: 20px; margin-top: -5px"
              />
              <a-select-option
                v-for="option in currentFunctionOptions"
                :value="option.value"
                :key="option.value"
              >
                {{ option.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </span>
        <span slot="sensorChannel" slot-scope="text">
          {{ text }}
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 假设有三个传感器的下拉框绑定值
      selectedOptions: {
        sensor1: {},
        sensor2: {},
        sensor3: {}
      },
      sensorIndex: 0,
      sensortabList: ['传感器一', '传感器二', '传感器三'],
      columns: [
        {
          title: '传感器通道',
          dataIndex: 'sensorChannel',
          align: 'center',
          scopedSlots: { customRender: 'sensorChannel' }
        },
        {
          title: '当前数据',
          dataIndex: 'sensorState',
          align: 'center'
        },
        {
          title: '通道状态',
          dataIndex: 'channelStatus',
          align: 'center'
        },
        {
          title: '选择功能',
          dataIndex: 'function',
          align: 'center',
          scopedSlots: { customRender: 'function' }
        },
        {
          title: '操作',
          width: '500px',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      functionOptionsRoll: {
        0: '备用',
        1: '左轮重',
        2: '右轮重',
        3: '左制动',
        4: '右制动',
        5: '左台体轮重',
        6: '右台体轮重',
        7: '摩托轮重',
        8: '摩托制动'
      },

      loadData: [],
      loadDataSensor: [],
      loading: false,
    }
  },
  props: {
    info: Object
  },
  created() {
    // 测试假数据
    this.loadSensorStatus1()
  },
  computed: {
    currentFunctionOptions() {
      // Determining which function options to use based on the current sensor index.
      let options = {}
      if (this.sensorIndex === 0) {
        options = this.functionOptionsRoll
      } 
      // Convert options to array and add defaultValue based on the sensor function data.
      return Object.entries(options).map(([value, label]) => {
        return {
          value,
          label
        }
      })
    }
  },

  methods: {
    async loadSensorStatus1() {
//模拟数据
      const testdata = {
        code: 200,
        success: true,
        message: '操作成功',
        data: {
          CMD: 1026,
          SensorFunc: [
            {
              ID: 1,
              ADFunc1: 0,
              ADFunc2: 1,
              ADFunc3: 2,
              ADFunc4: 3,
              ADFunc5: 4,
              ADFunc6: 5,
              DAFunc1: 7,
              DAFunc2: 7
            }
          ]
        },
        time: '2022-11-25 13:46:57'
      }
      // 设置下拉框的默认值
      this.selectedOptions.sensor1 = {
        ADFunc1: testdata.data.SensorFunc[0].ADFunc1.toString(),
        ADFunc2: testdata.data.SensorFunc[0].ADFunc2.toString(),
        ADFunc3: testdata.data.SensorFunc[0].ADFunc3.toString(),
        ADFunc4: testdata.data.SensorFunc[0].ADFunc4.toString(),
        ADFunc5: testdata.data.SensorFunc[0].ADFunc5.toString(),
        ADFunc6: testdata.data.SensorFunc[0].ADFunc6.toString(),
        DAFunc1: testdata.data.SensorFunc[0].DAFunc1.toString(),
        DAFunc2: testdata.data.SensorFunc[0].DAFunc2.toString()
      }

      // 如果有多个传感器，重复上面的过程
      const stainfo = testdata.data.SensorFunc[0]
      // sensorState数据配置用于参考对应的文本
      const tempdata = [
        {
          id: 1,
          sensorChannel: '通道1',
          sensorState: stainfo.ADFunc1,
          channelStatus: '0',
          function: stainfo.ADFunc1
        },
        {
          id: 2,
          sensorChannel: '通道2',
          sensorState: stainfo.ADFunc2,
          function: stainfo.ADFunc2
        },
        {
          id: 3,
          sensorChannel: '通道3',
          sensorState: stainfo.ADFunc3,
          function: stainfo.ADFunc3
        },
        {
          id: 4,
          sensorChannel: '通道4',
          sensorState: stainfo.ADFunc4,
          function: stainfo.ADFunc4
        },
        {
          id: 5,
          sensorChannel: '通道5',
          sensorState: stainfo.ADFunc5,
          function: stainfo.ADFunc5
        },
        {
          id: 6,
          sensorChannel: '通道6',
          sensorState: stainfo.ADFunc6,
          function: stainfo.ADFunc6
        },
        {
          id: 7,
          sensorChannel: 'DA通道1',
          sensorState: stainfo.DAFunc1,
          function: stainfo.DAFunc1
        },
        {
          id: 8,
          sensorChannel: 'DA通道2',
          sensorState: stainfo.DAFunc2,
          function: stainfo.DAFunc2
        }
      ]

      const keys = Object.keys(this.selectedOptions.sensor1) // 获取selectedOptions.sensor1的所有键
      this.loadData = tempdata.map((item, index) => {
        return {
          ...item,
          functionKey: keys[index] // 假设data数组的顺序与selectedOptions.sensor1中的键的顺序相对应
        }
      })
    },
    sensorchange(index) {
      this.sensorIndex = index
    },
  }
}
</script>

3. 总结

实现这个需求的核心是数据的映射与重组，然后配置到模版中的下拉组件进行数据绑定和遍历，有可能绕了一些弯路，好在终于实现了。谢谢各位观看，欢迎各位大佬优化指正~