修改el-transfer 左右两个穿梭框的高度和宽度,具体效果如下 正常大小的穿梭框 修改之后的,主要在style中加上如下样式即可
/ deep/ . el- transfer- panel{
width: 470 px;
height: 450 px;
}
/ deep/ . el- transfer- panel__list. is- filterable {
height: 303 px;
}
<template><p style="text-align: center; margin: 50px 0 20px" >使用 scoped-slot 自定义数据项</p><div style="text-align: center" ><el-transferstyle="text-align: left; display: inline-block" v-model="value4" filterable : left-default-checked="[2, 3]" : right-default-checked="[1]" : titles="['Source', 'Target']" : button-texts="['到左边', '到右边']" : format="{ noChecked : '$ { total} ', hasChecked : '$ { checked} /$ { total} '} "@change ="handleChange" : data="data" ><span slot-scope="{ option }" >{ { option.key } } - { { option.label } } </span><el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button><el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button></el-transfer></div>
</template><style>.transfer-footer { margin-left : 20px; padding : 6px 5px; } /deep/ .el-transfer-panel { width : 470px; height : 450px;
}
/deep/ .el-transfer-panel__list.is-filterable { height : 303px;
}
</style><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],value4: [1],renderFunc(h, option) { return <span> { option.key } - { option.label } </span>; } } ; } ,methods: { handleChange(value, direction, movedKeys) { console.log ( value, direction, movedKeys) ; } } } ;
</script>