element中select多选回显

最新推荐文章于 2025-06-23 15:00:32 发布

原创最新推荐文章于 2025-06-23 15:00:32 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

28 篇文章

订阅专栏

文章展示了在Vue.js应用中，使用ElementUI库创建一个多选下拉框（Select）并实现数据回显和编辑功能的方法。通过`v-model`绑定`form.type`，结合`getLstInteger`方法解析数据来回显已选择的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element中select多选回显

<el-table>
   <el-button type="text" @click="editList(scope.row)">编辑</el-button>
</el-table>

<el-form-item label="任务类型" prop="type">
            <el-select
              v-model="form.type"
              filterable
              multiple
              clearable
              placeholder="请选择类型"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
      }
    }
  }
</script>

回显方法

getLstInteger(row) {
      console.log(row, "回显");
      this.form = {
        ...row,
        type: JSON.parse(row.type),
      };
    },

编辑方法

    // 编辑
    editList(row) {
      this.getLstInteger(row);
    },