直播電商平臺開發，用el-checkout-group實現穿梭框el-transfer效果

直播電商平臺開發，用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效果， 更多內容歡迎關注之後的文章