ElementUIel-transfer穿梭框⾃定义el-transfer穿梭框
根据element官⽹改造成了⽂章最后图⽚的样式
但是离⽬标还差两处地⽅：
1.数字1处：把原本的显⽰多少条数据隐藏掉，变成⼀个⽂字按钮。
2.数字2处：把第⼆个搜索框隐藏，只留下第⼀个。
3.另外两个单选按钮能不能直接在el-transfer中加⼊
求⼤神指点⼀⼆，谢谢啦！
<template>
<div class="g-treetable-page">
<el-transfer
v-model="value"
:
data="data"
:filterable="true"
>
<div
slot-scope="{ option }"
>
<div >
{{ option.label }}
</div>
<div >
<el-button
htmlborder
type="text"
@click="q"
>
启动
</el-button>
<el-button
type="text"
@click="b"
>
编辑
</el-button>
<el-button
type="text"
@click="s"
>
删除
</el-button>
</div>
</div>
</el-transfer>
<div class="radio">
<el-radio
v-model="radio"
label="1"
>
选项⼀
</el-radio>
<el-radio
v-model="radio"
label="2"
>
选项⼆
</el-radio>
</div>
</div>
</template>
<script>
<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,
aaa:`备选项${i}`,
bbb:`备选项${i}`
})
}
return data
}
return{
data:generateData(),
value:[1,4],
radio:''
}
},
methods:{
q(){
alert('启动')
},
b(){
alert('编辑')
},
s(){
alert('删除')
}
}
}
</script>
<style scoped>
.el-transfer ::v-deep.el-transfer-panel{
border: 1px solid #EBEEF5;
border-radius: 4px;
overflow: hidden;
background: #FFF;
display: inline-block;
vertical-align: middle;
width: 500px;
height: 500px;
max-height: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.el-transfer ::v-deep.el-checkbox .el-transfer-panel__item{ border-bottom: 1px solid #ccc;
}
.el-transfer ::v-deep.el-transfer-panel__list.is-filterable{ height: 300px;
padding-top: 0;
}
.el-transfer ::v-deep.el-checkbox{
color: #606266;
font-weight: 500;
font-size: 14px;
cursor: pointer;
user-select: none;
/* margin-right: 30px; */
}
.el-transfer ::v-deep.el-transfer-panel{
width:calc(100% / 2 - 105px / 2);
}
.el-transfer ::v-deep.el-transfer-panel__filter .el-input__inner{ height: 32px;
font-size: 12px;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 10px;
padding-left: 30px;
}
.el-transfer ::v-deep.el-transfer-panel__filter{
text-align: center;
margin: 5px;
margin: 5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 272px;
}
.el-transfer ::v-deep  .el-transfer__buttons{
width: 45px;
}
.el-transfer ::v-deep  .el-button+.el-button{
margin-left: 0;
}
.radio{
position: absolute;
top: 60px;
left: 520px;
}
/* .el-transfer ::v-deep.el-transfer-panel__filter .el-input .el-input--small .el-input--prefix{  display: none !important;
} */
.el-transfer ::v-deep .el-transfer-panel__filter .el-input__inner{
height: 32px;
width: 100%;
font-size: 12px;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-right: 10px;
border-radius: 0px;
padding-left: 30px;
}
</style>
求⼤神指点⼀⼆，谢谢啦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。