vue 实现穿梭框,内容为checkbox,自带全选,筛选功能
时间: 2023-08-28 14:23:40 浏览: 39
您好,下面是一个简单的 Vue 穿梭框实现,包含复选框、全选和筛选功能:
```html
<template>
<div>
<!-- 左侧内容区域 -->
<div class="left">
<div class="search">
<input type="text" v-model="searchText" placeholder="请输入关键字">
<button @click="search">搜索</button>
</div>
<div class="items">
<label v-for="item in leftData" :key="item.id" :title="item.name">
<input type="checkbox" v-model="item.checked" @change="checkAll">
{{ item.name }}
</label>
</div>
</div>
<!-- 右侧选择区域 -->
<div class="right">
<div class="selected">
<label v-for="item in selectedData" :key="item.id" :title="item.name">
<input type="checkbox" v-model="item.checked" @change="checkAll">
{{ item.name }}
</label>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftData: [
{ id: 1, name: '选项1', checked: false },
{ id: 2, name: '选项2', checked: false },
{ id: 3, name: '选项3', checked: false },
{ id: 4, name: '选项4', checked: false },
{ id: 5, name: '选项5', checked: false },
],
selectedData: [],
searchText: '',
}
},
methods: {
// 左侧筛选
search() {
const text = this.searchText.trim().toLowerCase()
this.leftData.forEach(item => {
item.hide = !item.name.toLowerCase().includes(text)
})
},
// 全选
checkAll() {
const allChecked = this.leftData.every(item => item.checked)
this.leftData.forEach(item => {
item.checked = allChecked
})
},
},
// 计算属性
computed: {
// 过滤后的左侧数据
filteredLeftData() {
return this.leftData.filter(item => !item.hide)
},
},
}
</script>
<style>
.left {
display: inline-block;
width: 400px;
border: 1px solid #ccc;
padding: 10px;
vertical-align: top;
}
.right {
display: inline-block;
width: 200px;
border: 1px solid #ccc;
padding: 10px;
vertical-align: top;
}
.search {
margin-bottom: 10px;
}
.items {
max-height: 200px;
overflow-y: auto;
}
.selected {
max-height: 200px;
overflow-y: auto;
}
</style>
```
在这个实现中,左侧区域会显示一组复选框,可以通过搜索框进行筛选,也可以通过全选按钮进行全选/全不选操作。选中的复选框会被添加到右侧区域中。
需要注意的是,这个实现只是一个简单的示例,如果需要更复杂的功能,可能需要进行进一步的扩展和修改。希望这个实现可以对您有所帮助!