直播电商平台开发，用el-checkout-group实现穿梭框el-transfer效果
一：页面构建
<el-form-item label="选择模块:" prop="pubTime">
<div class="app-select">
<div class="list">
<el-input v-model="searchWord" placeholder="请输入模块名称" maxlength="30" suffix-icon="Search" clearable @change="search" />
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<div v-for="(item, i) in moduleOptions" :key="i">
<el-checkbox :label="item.label">{{ item.label }}</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
<div class="checked">
<div class="title">已选择模块</div>
<div class="checkedList">
<div class="checkedbox">
<el-checkbox-group v-model="checkList">
<div v-for="(item, i) in checkList" :key="i">
<el-checkbox :label="item">{{ item }}</el-checkbox>
</div>
</el-checkbox-group>
</div>
</div>
</div>
</div>
</el-form-item>
</el-form>
moduleList: [],
checkList: [],
二：搜索处理
async search() {
const res = await getModuleList({ name: this.searchWord })
this.moduleOptions = res.data.map((item) => {
return {
label: item.name,
value: item.id,
}
})
},
三：初始数据处理
async created() {
const res = await getModuleList({ query: {} })
this.moduleOptions = res.data.map((item) => {
return {
label: item.name,
value: item.id,
}
})
},
以上就是直播电商平台开发，用el-checkout-group实现穿梭框el-transfer效果， 更多内容欢迎关注之后的文章