vue+elementUI使用v-for循环出多个el-select下拉框，多个下拉框不受影响且反显

果子切克now

于 2024-08-16 15:29:15 发布

阅读量59

点赞数 1

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_54514048/article/details/141261138

版权

<template>
  <div>
    <div v-for="(item, index) in from" :key="item.label">
      <span>{{ item.label }}</span>
      <!-- arr[index] 每一个值的绑定@change="(val) => chageValue(val,index)"每一项选择的值-->
      <el-select
        v-model="arr[index]"
        placeholder="请选择"
        @change="(val) => chageValue(val)"
      >
        <el-option
          v-for="v in item.options"
          :key="v.value"
          :label="v.label"
          :value="v.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-button @click="btnClickSele">点击</el-button>
  </div>
</template>

 data() {
    return {
      arr: [],
      from: [
        {
          label: "1",
          options: [
            {
              value: "选项1",
              label: "1",
            },
            {
              value: "选项11",
              label: "11",
            },
            {
              value: "选项111",
              label: "111",
            },
            {
              value: "选项1111",
              label: "1111",
            },
            {
              value: "选项111111",
              label: "1111",
            },
          ],
        },
        {
          label: "2",
          options: [
            {
              value: "选项2",
              label: "2",
            },
            {
              value: "选项22",
              label: "22",
            },
            {
              value: "选项2222",
              label: "222",
            },
            {
              value: "选项222222",
              label: "2222",
            },
            {
              value: "选项2222222",
              label: "22222",
            },
          ],
        },
        {
          label: "3",
          options: [
            {
              value: "选项3",
              label: "3",
            },
            {
              value: "选项33",
              label: "33",
            },
            {
              value: "选项333",
              label: "333",
            },
            {
              value: "选项3333",
              label: "3333",
            },
            {
              value: "选项53333333",
              label: "33333",
            },
          ],
        },
      ],
    };
  },
  // 未打乱循序
  let arr = [
      { id: "1", label: ["选项111", "选项111111"] },
      { id: "2", label: ["选项22", "选项222222"] },
      { id: "3", label: ["选项3333", "选项53333333"] },
    ];
    arr.map((ele, index) => {
      this.arr[index] = ele.label // 反显
    });
    // 打乱循序 label值得于上面的this.from中的options.value一样
       let arr = [
      { id: "3", label: ["选项3333", "选项53333333"] },
      { id: "2", label: ["选项22", "选项222222"] },
      { id: "1", label: ["选项111", "选项111111"] },
    ];
    arr
      .sort((a, b) => Number(a.id) - Number(b.id))
      .map((item, index) => (this.arr[index] = item.label));
  },
  methods: {
    btnClickSele() {
      console.log(this.from);
      console.log(this.arr);
    },
    chageValue(value,index) {
      console.log(value,index);
      let params = {
        id:this.from[index].label,
        label:value
      }
      console.log(params); // 可以打印看一下
    },
  },