<template>
  <div class="app-container">
    <div class="container">
      <!-- 搜索表单 -->
      <el-form :model="queryParams"
        inline>
        <el-form-item label="直播间">
          <el-select v-model="queryParams.brandList"
            multiple
            clearable
            collapse-tags
            collapse-tags-tooltip
            @change="queryChange">
            <el-option v-for="str in brandList"
              :label="str"
              :value="str">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
const data = reactive({
  brandList: [],
  queryParams: {
    brandList: []
  },
  columns: [
    {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }, {
      label: '订单编号',
      prop: ''
    }
  ]
})

const { brandList, queryParams } = toRefs(data)

const queryChange = () => {

}
</script>

<style scoped
  lang="scsss">

</style>