vue+element实现列表多选框
2019-08-19 本文已影响0人
韩小强
element自带组件中有多选框、依赖于多选框实现的穿梭框,并没有这种列表多选框

实现方式,借助element样式
<div class="receiverbox" v-if="teldata.length">
<div data-v-fbb70540="" class="el-transfer receiver">
<div class="el-transfer-panel" titles="上传列表" buttontexts="" filterplaceholder="" leftdefaultchecked="" rightdefaultchecked="" value="" targetorder="original">
<p class="el-transfer-panel__header">
<!----更改内容start------>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">上传列表<span class="el-checkbox__label"><span>{{ checkedCities.length }}/{{ teldata.length }}</span><!----></span></el-checkbox>
<!----更改内容start------>
</p>
<div class="el-transfer-panel__body">
<div class="el-checkbox-group el-transfer-panel__list">
<!----更改内容start------>
<el-checkbox-group v-model="dataForm.receiver" @change="handleCheckedCitiesChange">
<el-checkbox :label="item" :key="item" v-for="item in teldata">{{item}}</el-checkbox>
</el-checkbox-group>
<!----更改内容start------>
</div>
</div>
</div>
</div>
</div>
使用穿梭框解析完框架代码,嵌套官网全选多选框自定义内容,制作单框下拉多选列表