el-input 远程搜索 多选
时间: 2023-10-10 17:15:25 浏览: 48
您好,关于您的问题,el-input组件的远程搜索多选功能,可以通过下拉框的multiple属性和远程搜索功能的结合来实现。具体实现方法可以参考 Element UI 官方文档中的 Select 组件远程搜索的示例。在该示例中,可以通过对 Select 组件的 filterable 属性进行设置来开启远程搜索功能;同时,将该组件的 multiple 属性设置为 true,就可以开启多选功能了。如果您对实现还有疑问,可以随时向我提问哦。
相关问题
el-input 远程搜索 多选实现代码
好的,关于 el-input 远程搜索多选的实现,可以参考下面的代码:
```
<el-select
v-model="selectedItems"
multiple
filterable
remote
reserve-keyword
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in items"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<script>
export default {
data() {
return {
selectedItems: [],
items: [],
loading: false
};
},
methods: {
remoteMethod(query) {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.items = [{
value: 'item1',
label: 'Item 1'
}, {
value: 'item2',
label: 'Item 2'
}, {
value: 'item3',
label: 'Item 3'
}];
}, 1000);
}
}
};
</script>
```
其中,el-select 组件设置了 multiple 多选,filterable 过滤,remote 远程搜索,reserve-keyword 保留关键字,同时绑定了一个 selectedItems 数组用于存储选中的值。
另外,remote-method 方法用于处理远程搜索,其中通过 setTimeout 模拟了异步请求数据的过程,并在请求完成后将数据存储到 items 数组中。
这是一个简单的 el-input 远程搜索多选实现的示例,你可以根据自己的需求进行相应的修改。
el-table-column多选
要在 Element UI 的 el-table 中使用多选功能,需要使用 el-table-column 组件,同时设置 type 为 selection。以下是示例代码:
```
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, address: '北京市海淀区' },
{ name: '李四', age: 30, address: '上海市浦东新区' },
{ name: '王五', age: 28, address: '广州市天河区' }
]
}
}
}
</script>
```
在上述代码中,el-table-column 组件的 type 属性设置为 selection,表示这一列是多选框列。el-table-column 组件的 prop 属性表示数据源的字段名,label 属性表示列的标题。tableData 数据源中每一项都应包含 name、age 和 address 字段。
这样,el-table 的多选功能就实现了。在用户勾选多选框后,可以通过 $refs 属性获取选中的行数据。例如:
```
<template>
<el-button type="primary" @click="handleSelection">获取选中项</el-button>
<br>
<br>
<el-table :data="tableData" ref="table" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, address: '北京市海淀区' },
{ name: '李四', age: 30, address: '上海市浦东新区' },
{ name: '王五', age: 28, address: '广州市天河区' }
]
}
},
methods: {
handleSelection() {
const selectedRows = this.$refs.table.selection
console.log(selectedRows)
}
}
}
</script>
```
在上述代码中,el-button 组件的点击事件绑定了 handleSelection 方法,该方法通过 $refs.table.selection 获取选中的行数据,并将其打印到控制台中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)