用到了jquery,所以需要下载jquery包,"jquery": "^3.6.0"
<template>
<div>
选中的{{result}}---数据
<el-transfer v-model="result" :data="transferData" filter-placeholder="冷冻盒编号" filterable :titles="['冷冻盒', '已选冷冻盒']" :render-content="renderFunc" :props="{ label: 'boxCode', key: 'id' }" :format="{
noChecked: '${total}',
hasChecked: '${checked}/${total}'
}">
</el-transfer>
</div>
</template>
<script>
import $ from 'jquery'
export default {
data () {
return {
result: [],
transferData: [], // 穿梭框数据
renderFunc (h, option) {
return <div class="item-box">
<div class="item-left">{option.boxCode}</div>
<div class="item-right">{option.boxType}</div>
</div>
}
}
},
mounted () {
setDom()
this.getTable()
},
methods: {
// 查询盒子规格列表
async getTable () {
let list = [
{
boxCode: 'BOX00002652A1',
id: 11,
boxType: 1
},
{
boxCode: 'BOX00002652A2',
id: 12,
boxType: 2
},
{
boxCode: 'BOX00002652A3',
id: 13,
boxType: 3
},
{
boxCode: 'BOX00002652A4',
id: 14,
boxType: 4
},
{
boxCode: 'BOX00002652A5',
id: 15,
boxType: 5
}
]
list.map((item) => {
item.boxType === 5 ? item.boxType = '6*6' : ''
item.boxType === 1 ? item.boxType = '6*8' : ''
item.boxType === 2 ? item.boxType = '8*12' : ''
item.boxType === 3 ? item.boxType = '9*9' : ''
item.boxType === 4 ? item.boxType = '10*10' : ''
})
this.transferData = list
}
}
}
function setDom () {
const html = `<div class="he-box">
<div class="he-left">冷冻盒编号</div>
<div class="he-right">冷冻盒规格</div>
</div>`
$('div.el-transfer-panel__filter').after(html)
}
</script>
<style lang="less" scoped>
/deep/ .el-transfer-panel__filter {
margin-bottom: 5px;
}
/deep/ .el-transfer-panel {
width: 239px !important;
}
/deep/ .he-box {
display: flex;
padding: 0 10px;
justify-content: space-between;
}
/deep/ .item-box {
display: flex;
justify-content: space-between;
}
/deep/ .el-transfer-panel__body {
height: 300px;
.el-transfer-panel__list.is-filterable {
height: 240px;
padding-bottom: 15px;
}
.el-checkbox {
margin-right: 10px;
padding-left: 10px;
}
}
/deep/ .el-transfer__buttons {
padding: 0 10px;
}
/deep/ .el-transfer-panel {
border: 1px solid #dcdfe6;
}
/deep/
.el-transfer-panel
.el-transfer-panel__header
.el-checkbox
.el-checkbox__label {
font-size: 13px;
}
</style>