需要实现的效果:
先附上官网:https://element.eleme.cn/#/zh-CN/component/transfer:官网默认实例
<template>
<el-transfer v-model="value" :data="data"></el-transfer>
</template>
<script>
export default {
data() {
const generateData = _ => {
const data = [];
for (let i = 1; i <= 15; i++) {
data.push({
key: i,
label: `备选项 ${ i }`,
disabled: i % 4 === 0
});
}
return data;
};
return {
data: generateData(),
value: [1, 4]
};
}
};
</script>
在这里遇见俩坑:
data一开始的数据
1 在展示leftDate的时候 无法绑定数据时:定义一个新的数组去接受
2 注意数据类型是否对应:当你的 key 为 "1" 的时候 1是无法获取到数据的
通过 vue devtools调试的时候发现 key与rightData的数据类型不同
然后数据格式要改成【“1”,“603”】
二:
@row-click
和@selection-change的耦合
需求:点击某一行,将该行背景色改变
先展示效果图:
checkbox
勾选的时候,alert
会被触发两次。我猜测是@row-click
和@selection-change
耦合了,但是element-UI
的文档很简洁,不知道@row-click
和@selection-change
怎么解耦。
正常效果应该是点击一行数据alert
出数据的id,点击checkbox
把id存起来。
代码:el-table
方法:
css:
<style>
/*!* 用来设置当前页面element全局table的内间距 *!*/
/*.el-table__row td{*/
/*padding: 0;*/
/*}*/
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row>td{
background-color: #b7f1ee !important;
/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */
}
/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #b7f1ee;
/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */
}
</style>