vue+element实现列表多选框

2019-08-19  本文已影响0人  韩小强

element自带组件中有多选框、依赖于多选框实现的穿梭框,并没有这种列表多选框


image.png

实现方式,借助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>

使用穿梭框解析完框架代码,嵌套官网全选多选框自定义内容,制作单框下拉多选列表

上一篇 下一篇

猜你喜欢

热点阅读