介绍：点击左边变色，并且把点击的数据穿梭到右边，二次点击左边可以取消，并且右边的数据也会消失。点击右边可以移除数据，并且左边的数据背景颜色也会变回正常。左侧下滑实现一个瀑布流的懒加载。 为什么要原生写呢？因为组件库不一定符合公司的需求。
html部分
<template>
<div class="kehubox clear">
<div class="kehuname clear">
<h5>客户端名称</h5>
<h5>权限编号</h5>
<h5>描述</h5>
<div class="table" @scroll="leftTablesScroll" ref="leftTables">
<div
class="tableItem clear"
:style="{
backgroundColor: item.isActive ? '#ebf7ff' : '#fff',
}"
v-for="(item, index) in tables"
:key="index"
@click="clickTableItem(item)"
>
<div class="hlys">{{ item.appName }}</div>
<div class="hlys">{{ item.permSign }}</div>
<div class="hlys">{{ item.description }}</div>
</div>
</div>
</div>
<div class="limitsBox">
<div class="limitsMall">已选择权限</div>
<div class="limitsList">
<div
class="errItem"
v-for="(item, index) in columns1"
:key="index"
@click="deleteList(item)"
>
{{ item.permSign }}
</div>
</div>
</div>
</div>
</template>
css代码块
.kehubox {
height: 200px;
padding-top: 40px;
.kehuname {
float: left;
width: 50%;
h5 {
float: left;
width: 33.33%;
}
.table {
width: 100%;
height: 650px;
border: 1px solid #ddd;
border-radius: 3px;
overflow-y: auto;
.tableItem {
height: 50px;
padding-left: 5px;
border-bottom: 1px solid #ddd;
font-size: 14px;
line-height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
.hlys {
text-align: left;
width: 33.33%;
line-height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.active {
background: rgb(233, 244, 253);
}
}
}
}
.limitsBox {
width: 40%;
float: left;
padding-left: 40px;
.limitsMall {
margin-bottom: 20px;
}
.limitsList {
width: 350px;
height: 500px;
border: 1px solid #ccc;
.errItem {
font-size: 20px;
padding: 0 20px;
line-height: 45px;
border: 1px solid;
}
}
}
.clear:after {
content: ""; /*里面可以为空、内容的意思*/
visibility: hidden; /*隐藏*/
height: 0;
display: block;
clear: both;
overflow: hidden;
}
.clear {
zoom: 1; /*这个转为解决IE6的bug的*/
}
js逻辑代码块
data() {
return {
tables: [
{
appName: "小米",
permSign: "1",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "1",
},
{
appName: "小米",
permSign: "2",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "2",
},
{
appName: "小米",
permSign: "3",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "3",
},
{
appName: "小米",
permSign: "4",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "4",
},
{
appName: "小米",
permSign: "5",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "5",
},
{
appName: "小米",
permSign: "6",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "6",
},
{
appName: "小米",
permSign: "7",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "7",
},
{
appName: "小米",
permSign: "8",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "8",
},
{
appName: "小米",
permSign: "9",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "9",
},
{
appName: "小米",
permSign: "10",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "10",
},
{
appName: "小米",
permSign: "11",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "11",
},
{
appName: "小米",
permSign: "12",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "12",
},
{
appName: "小米",
permSign: "13",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "13",
},
{
appName: "小米",
permSign: "14",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "14",
},
{
appName: "小米",
permSign: "15",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "15",
},
{
appName: "小米",
permSign: "16",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "16",
},
{
appName: "小米",
permSign: "17",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "17",
},
{
appName: "小米",
permSign: "18",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "18",
},
{
appName: "小米",
permSign: "19",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "19",
},
{
appName: "小米",
permSign: "20",
description: "跑步",
description: "跑步",
isActive: false,
appInfoId: "20",
},
],
pageNum: 1,
pageSize: 10,
columns1: [],
};
},
methods: {
// 下滑，实现一个瀑布流
leftTablesScroll() {
let scrolltop = this.$refs.leftTables.scrollTop;
let offsetheight = this.$refs.leftTables.offsetHeight;
let scrollheight = this.$refs.leftTables.scrollHeight;
if (
scrollheight - offsetheight - scrolltop < 100 &&
this.isLoadingRoleList
) {
this.pageNum++;
// this.getClient();
}
},
// 左侧点击
clickTableItem(newName) {
if (newName.isActive == false) {
this.columns1.push(newName);
newName.isActive = true;
} else {
// 再次点击时候取消
newName.isActive = false;
this.columns1 = this.columns1.filter(
(item) => item.appInfoId !== newName.appInfoId
);
}
},
// 右侧取消
deleteList(name) {
this.columns1 = this.columns1.filter((item) => item !== name);
this.tables.forEach((item) => {
if (item.appInfoId == name.appInfoId) {
item.isActive = false;
}
});
},
},
