使用复选框,实现需求
需求 实现 html,拿到数据后,先将左侧数据渲染到页面上 js 部分
需求
当我点击单个复选框,将内容添加到右侧 当我复选框全部点击后,将内容添加到右侧,全选按钮自动勾选 当我点击全选按钮,左侧内容全部勾选,右侧内容已添加 当我取消全选按钮,右侧内容都删除,左侧的复选框全部取消勾选 当我点击右侧删除按钮,删除右侧内容,左侧复选框取消勾选
实现
html,拿到数据后,先将左侧数据渲染到页面上
/* 左侧部分 */
< div class = " left" >
< ul class = " memberList" >
< li v-for = " (item,index) in memberList" :key = " index" >
< el-avatar
:src = " item.admin_info?item.admin_info.avatar:' ' " />
< span> {{ item.name }}</ span>
< el-checkbox
v-model = " item.checked"
@change = " changeCheckbox(item)" />
</ li>
</ ul>
< el-checkbox
v-model = " checked"
@change = " allSelect"
> 全选</ el-checkbox>
</ div>
/* 右侧部分 */
< div class = " right" >
< ul class = " memberList" >
< li v-for = " (it,ind) in seletList" :key = " ind" >
< el-avatar :src = " it.admin_info?it.admin_info.avatar:' ' " />
< span> {{ it.name }}</ span>
< i class = " el-icon-close close" @click = " deleteFn(it,ind)" />
</ li>
</ ul>
</ div>
javascript">export default {
data ( ) {
return {
memberList: [ ] ,
seletList: [ ] ,
checked: false ,
}
} ,
methods: {
changeCheckbox ( item ) {
if ( item. checked) {
this . seletList. push ( item)
} else {
const res = this . seletList. findIndex ( it => {
return item. name === it. name
} )
this . seletList. splice ( res, 1 )
}
const res = this . memberList. findIndex ( it => {
return it. checked === false
} )
if ( res === - 1 ) {
this . checked = true
} else {
this . checked = false
}
} ,
allSelect ( ) {
if ( this . checked) {
this . memberList. forEach ( item => {
item. checked = true
this . seletList. push ( item)
} )
} else {
this . memberList. forEach ( item => {
item. checked = false
} )
this . seletList = [ ]
}
} ,
deleteFn ( it, ind ) {
this . seletList. splice ( ind, 1 )
this . checked = false
this . memberList. forEach ( ite => {
if ( ite. name === it. name) {
ite. checked = false
}
} )
} ,
}
}