element-ui Select选择器设置

最新推荐文章于 2024-09-18 11:01:49 发布

王林-wlin

最新推荐文章于 2024-09-18 11:01:49 发布

阅读量839

点赞数

文章标签： vue js javascript

本文为CSDN博主「王林」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

本文链接：https://blog.csdn.net/qq_45912025/article/details/131048168

版权

文章详细介绍了如何在Element-UI中使用Select选择器，包括v-model用于绑定默认值和变化监听，@change事件处理选中后的操作，以及key、label和value属性的用途。此外，还提到了multiple属性用于实现多选功能，并展示了设置默认选中项的示例。

摘要由CSDN通过智能技术生成

element-ui Select选择器设置

一、代码展示

 <el-form-item label="数据源" prop="datasourceIds">
            <template>
              <el-select v-model="defaultDatasourceList" multiple placeholder="请选择数据源" @change="selectItemChanged" clearable style="width:100%">
                <el-option v-for="item in datasourceAllList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </template>
          </el-form-item>
        </el-form>

二、详解

v-model

默认显示的id值，数据类型是数组

@change

点击选选中后，值发生变化时触发，默认参数是value

例如：

selectItemChanged(value) {
      console.log('选中的选项：' + value)
      //保存选中的选项的id
      this.addProjectForm.datasourceIds = value.join(',')
      console.log('点击选择后，选中的选项的值：' + this.addProjectForm.datasourceIds)
    },