直播电商平台开发，用el-checkout-group实现穿梭框el-transfer效果

直播电商平台开发，用el-checkout-group实现穿梭框el-transfer效果

一：页面构建

 

1

<el-form-item label="选择模块:" prop="pubTime"><br>   <div class="app-select"><br>      <div class="list"><br>        <el-input v-model="searchWord" placeholder="请输入模块名称" maxlength="30" suffix-icon="Search" clearable @change="search" /><br>        <div class="checkbox"><br>          <el-checkbox-group v-model="checkList"><br>            <div v-for="(item, i) in moduleOptions" :key="i"><br>              <el-checkbox :label="item.label">{{ item.label }}</el-checkbox><br>            </div><br>          </el-checkbox-group><br>        </div><br>      </div><br>      <div class="checked"><br>        <div class="title">已选择模块</div><br>        <div class="checkedList"><br>          <div class="checkedbox"><br>            <el-checkbox-group v-model="checkList"><br>              <div v-for="(item, i) in checkList" :key="i"><br>                <el-checkbox :label="item">{{ item }}</el-checkbox><br>              </div><br>            </el-checkbox-group><br>          </div><br>        </div><br>      </div><br>    </div><br>  </el-form-item><br></el-form><br>moduleList: [],<br>checkList: [],

​

二：搜索处理

 

1	async search() {<br>  const res = await getModuleList({ name: this.searchWord })<br>   this.moduleOptions = res.data.map((item) => {<br>     return {<br>       label: item.name,<br>       value: item.id,<br>     }<br>   })<br> },<br>

 

三：初始数据处理

 

1	async created() {<br>    const res = await getModuleList({ query: {} })<br>    this.moduleOptions = res.data.map((item) => {<br>      return {<br>        label: item.name,<br>        value: item.id,<br>      }<br>    })<br>  },

 

 以上就是直播电商平台开发，用el-checkout-group实现穿梭框el-transfer效果， 更多内容欢迎关注之后的文章