vue 用select和multiple进行多选？

Question

enumBrandType这个时组件引用的### 问题描述
用select和multiple进行多选出现Error 1241: Operand should contain 1 column(s)这个错误

问题出现的环境背景及自己尝试过哪些方法

<template>
<div>

<h3 align="center">产业信息</h3>
<div class="fill">
  <el-button type="primary" @click="fillin()" style="margin-left: 85%"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增数据</el-button>
</div>
<el-table :data="tableData" v-loading="loading" border>
  <el-table-column prop="product_name" label="产品名称" align="center"></el-table-column>
  <el-table-column prop="base_type_name" label="基地类型" align="center"></el-table-column>
  <el-table-column prop="breed_type" label="种养方式" align="center">
    <template slot-scope="scope">
      {{enumBreedType[scope.row.breed_type]}}
    </template>
  </el-table-column>
  <el-table-column prop="scale" label="规模" align="center"></el-table-column>
  <el-table-column prop="uscale" label="单位" align="center"></el-table-column>
  <el-table-column prop="input_date" label="投产时间" align="center"></el-table-column>
  <el-table-column label="三年产量统计" align="center">
    <el-table-column prop="current_year_output" :label=" yearlabel + '年'" align="center"></el-table-column>
    <el-table-column prop="last_year_output" :label=" yearlabel-1 + '年'" align="center"></el-table-column>
    <el-table-column prop="llast_year_output" :label=" yearlabel-2 + '年'" align="center"></el-table-column>
    <el-table-column prop="output_unit" label="产量单位" align="center"></el-table-column>
  </el-table-column>
  <el-table-column label="品牌信息（三品一标）" align="center">
    <template slot-scope="scope">
      {{enumBrandType[scope.row.brand_type]}}
    </template>
  </el-table-column>
  <el-table-column label="品牌竞争力" align="center">
    <template slot-scope="scope">
      {{enumBrandPowerType[scope.row.brand_power_type]}}
    </template>
  </el-table-column>
  <el-table-column label="产业实景照片" align="center">
    <template slot-scope="scope">
      <img :src="scope.row.product_images" width="60px" height="80px">
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center" width="80px">
    <template slot-scope="scope">
        <el-button type="text" icon="el-icon-edit" style="font-size: 20px" @click="showPutview(scope.row)"></el-button>
        <el-button type="text" icon="el-icon-delete" @click="deleteInfo(scope.row.id)" style="font-size: 20px;color:red;"></el-button>
    </template>
  </el-table-column>
</el-table>
<div class="query-pagination">
  <el-pagination class="pull-right"
                 @current-change="getData"
                 :current-page.sync="params.index"
                 :page-size="params.size"
                 layout="total, prev, pager, next, jumper"
                 :total="tableTotal">
  </el-pagination>
</div>

<el-dialog width="96%" :visible.sync="fillVisible" :before-close="CloseDialog">
  <h3 align="center">产业信息</h3>
  <el-table :data="industData" v-loading="industloading" border>
    <el-table-column label="产品名称" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="产品名称" v-model="scope.row.product_name"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="基地类型" align="center" width="120px">
      <template slot-scope="scope">
      <SelectFarmCategory v-model="scope.row.base_type" @input="CategoryChang" @change="Typename(scope.$index)" :clearable="true"></SelectFarmCategory>
      </template>
    </el-table-column>
    <el-table-column label="种养方式" align="center" width="90px">
      <template slot-scope="scope">
        <el-select placeholder="选择" v-model="scope.row.breed_type" :clearable="true" @change="Resetscale(scope.row.breed_type, scope.$index)">
        <el-option key="1" label="设施" value="1"></el-option>
        <el-option key="2" label="陆地" value="2"></el-option>
        <el-option key="3" label="圈养" value="3"></el-option>
        <el-option key="4" label="散养" value="4"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="规模" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="规模" v-model="scope.row.scale"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="适度规模" align="center" width="120px">
      <template slot-scope="scope">
        <el-input placeholder="适度规模" v-model="scope.row.moderate_scale" :disabled="scope.row.breed_type === '1' || scope.row.breed_type === '2'"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="单位" align="center" width="90px">
      <template slot-scope="scope">
          <el-autocomplete
            class="inline-input" v-model="scope.row.uscale" :fetch-suggestions="querySearch"
            placeholder="单位"></el-autocomplete>
      </template>
    </el-table-column>
    <el-table-column label="投产时间" align="center" width="140px">
      <template slot-scope="scope">
        <el-date-picker
          :clearable="true"
          v-model="scope.row.input_date"
          type="date"
          style="width: 140px"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </template>
    </el-table-column>
    <el-table-column label="三年产量统计" align="center" width="490px">
      <el-table-column :label=" yearlabel + '年'" width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false" style="width: 110px" v-model="scope.row.current_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column :label=" yearlabel-1 + '年'" width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false" style="width: 110px" v-model="scope.row.last_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column :label=" yearlabel-2 + '年'" width="120px" align="center">
        <template slot-scope="scope">
          <el-input-number  :min="0" :controls="false"style="width: 110px" v-model="scope.row.llast_year_output"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="产量单位" align="center" width="90px">
        <template slot-scope="scope">
            <el-autocomplete
              class="inline-input" v-model="scope.row.output_unit" :fetch-suggestions="querySearch"
              placeholder="单位"></el-autocomplete>
        </template>
      </el-table-column>
    </el-table-column>
    <el-table-column label="品牌信息（三品一标）" align="center" width="130px">
      <template slot-scope="scope">
        <el-select multiple placeholder="请选择" v-model="scope.row.brand_type" value-key="key" :clearable="true">
          <el-option v-for="(val, key) in enumBrandType" :key="key" :label="val" :value="val"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="品牌竞争力" align="center" width="140px">
      <template slot-scope="scope">
        <el-select placeholder="请选择" v-model="scope.row.brand_power_type" :clearable="true">
        <el-option key="1" label="产品为新型产品/品牌知名度高,符合市场需求" value="1"></el-option>
        <el-option key="2" label="产品受欢迎度/知名度较高" value="2"></el-option>
        <el-option key="3" label="产品竞争力一般,与同类产品的品质/功能区别不大" value="3"></el-option>
        <el-option key="4" label="产品竞争力较弱,价格较低" value="4"></el-option>
        <el-option key="5" label="产品质量差,凭借低价占领市场" value="5"></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="附件" align="center">
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click="pupload(scope.$index)">图片上传</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="mt-3">
    <el-row :gutter="20">
      <el-col :span="2"><el-button @click="CloseDialog" style="width: 100%">取消</el-button></el-col>
      <el-col :span="2"><el-button @click="onsubmit"  style="width: 100%" :loading="postloading"><span v-if="!isput">添加</span><span v-else>修改</span></el-button></el-col>
      <el-col :span="3" :offset="16"><el-button @click="industData.push({})" style="width: 100%" v-if="!isput">新增一行</el-button></el-col>
    </el-row>
  </div>
</el-dialog>

<el-dialog width="60%" :visible.sync="puploadVisible" :before-close="handleClose">
  <div class="fill">
    <h3 align="center">附件上传</h3>
    <el-form>
      <el-form-item label="三品一标" style="margin-left: 30px"><br>
        <upload-oss ref="attachment"
                    listType="picture-card"
                    accept="image/*"
                    :on-complete="handleComplete"
                    :file-list="attachmentFileList"><i class="el-icon-plus" slot="trigger"></i></upload-oss>
      </el-form-item>
      <el-form-item label="产业实景图片" style="margin-left: 30px"><br>
        <upload-oss single-image
                    ref="product"
                    accept="image/*"
                    :on-complete="handleComplete1"
                    :file-list="fileList"></upload-oss>
      </el-form-item>
    </el-form>
    <div>
      <el-button @click="handleClose" style="margin-left: 15%">取消</el-button>
      <el-button style="margin-left: 10%" @click="PostrowImages" :loading="imageloading">确定</el-button>
    </div>
  </div>
</el-dialog>

</div>
</template>

<script>
import {getIndustif, postIndustif, deleteIndustif, putIndustif} from '@/api/credit'
import SelectFarmCategory from '@/components/SelectFarmCategory'
import UploadOss from '@/components/UploadOss'
import {enumBreedType, enumBrandPowerType, enumBrandType} from '@/utils/enum'
export default {

components: {
  SelectFarmCategory,
  UploadOss
},

props: {},

data() {
  return {
    enumBrandPowerType,
    enumBrandType,
    enumBreedType,
    params: {
      index: 1,
      size: 10
    },
    yearlabel: '',
    tableData: [],
    form: {},
    tableTotal: 0,
    Typelabel: '',
    loading: false,
    // 新增
    industData: [{}, {}],
    imagesIndex: '',
    images: '',
    productimages: '',
    attachmentFileList: [],
    fileList: [],
    restaurants: [{value: '斤'}, {value: '公斤'}, {value: '头'}, {value: '只'}, {value: '尾'}, {value: '羽'}],
    isput: false,
    imageloading: false,
    postloading: false,
    industloading: false,
    fillVisible: false,
    puploadVisible: false
  }
},

computed: {},
watch: {},

created() {
  // Object.keys(enumBrandType).forEach(key => {
  //   this.brand_type.push(enumBrandType[key])
  // })
  this.init()
  this.getData()
},

mounted() {
},

methods: {
  querySearch(queryString, cb) {
    var restaurants = this.restaurants
    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
    // 调用 callback 返回建议列表的数据
    cb(results)
  },
  createFilter(queryString) {
    return (restaurant) => {
      return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
    }
  },
  Resetscale(val, index) {
    this.industData[index].moderate_scale = ''
    if (val === '1') {
      this.industData[index].moderate_scale = '200亩'
    } else if (val === '2') {
      this.industData[index].moderate_scale = '1000亩'
    }
  },
  handleComplete(images) {
    this.images = '["' + images.map(img => img.url).join('","') + '"]'
    let index = this.imagesIndex
    this.industData[index].attachment = this.images
    this.$refs.product.submit()
  },
  handleComplete1(images) {
    this.productimages = images.length ? `${images[0].url}` : ''
    let index = this.imagesIndex
    this.industData[index].product_images = this.productimages
    this.handleClose()
  },
  showPutview(data) {
    this.isput = true
    this.fillVisible = true
    this.industData = []
    this.industData.push({...data})
  },
  init() {
    this.form = JSON.parse(localStorage.getItem('detail'))
    this.yearlabel = new Date().getFullYear()
  },
  getData() {
    this.loading = true
    getIndustif({
      index: this.params.index,
      size: this.params.size,
      service_id: this.form.service_id,
      customer_id: this.form.customer_id,
      customer_related_id: this.form.id
    }, {}).then(res => {
      if (res) {
        this.tableData = res.data.data
        this.tableTotal = res.data.totalCount
      }
    }).catch(err => {
      console.log(err)
    }).then(() => {
      this.loading = false
    })
  },
  PostrowImages () {
    this.imageloading = true
    this.$refs.attachment.submit()
  },
  Typename(index) {
    this.industData[index].base_type_name = this.Typelabel
  },
  CategoryChang(val, name) {
    this.Typelabel = name
  },
  onsubmit() {
    this.postloading = true
    let i = 1
    for (let t = 0; t < this.industData.length; t++) {
      if (this.industData[t].base_type || this.industData[t].product_name) {
        if (this.industData[t].base_type && this.industData[t].product_name) {
          this.industData[t].customer_id = this.form.customer_id
          this.industData[t].customer_related_id = this.form.id
          this.industData[t].customer_name = this.form.farm_name
          this.industData[t].service_id = this.form.service_id
        } else if (this.industData[t].base_type) {
          this.$message.warning('请输入产品名称！')
          i = 0
          this.postloading = false
          return
        } else {
          this.$message.warning('请选择基地类型！')
          i = 0
          this.postloading = false
          return
        }
      } else {
        if (this.industData.length > 1) {
          this.industData.splice(t, 1)
          t--
        } else {
          i = 2
          this.postloading = false
          this.$message.warning('请输入产品！')
        }
      }
    }
    if (i === 2) {
      this.fillData = [{}, {}]
    }
    if (i === 1) {
      if (!this.isput) {
        postIndustif(this.industData).then(res => {
          if (res.data) {
            this.$message.success('添加信息成功！')
            this.getData()
            this.CloseDialog()
          } else {
            this.$message.error('添加信息失败，请重试！')
          }
        }).catch(err => {
          console.log(err)
          this.$message.error('添加信息失败，请重试！')
        })
      } else {
        for (let p of this.industData) {
          putIndustif(p.id, p).then(res => {
            if (res.data) {
              this.$message.success('修改信息成功！')
              this.getData()
              this.CloseDialog()
            } else {
              this.$message.error('修改信息失败，请重试！')
            }
          }).catch(err => {
            console.log(err)
            this.$message.error('修改信息失败，请重试！')
          })
        }
      }
    }
  },
  CloseDialog() {
    this.fillVisible = false
    this.isput = false
    this.postloading = false
    this.getData()
    this.industData = [{}, {}]
  },
  handleClose() {
    this.puploadVisible = false
    this.images = ''
    this.attachmentFileList = []
    this.imageloading = false
  },
  fillin() {
    this.fillVisible = true
  },
  pupload(val) {
    this.imagesIndex = val
    this.attachmentFileList = this.$utils.photoList(this.industData[val].attachment)
    this.fileList = [{url: this.industData[val].product_images, name: ''}]
    this.puploadVisible = true
  },
  deleteInfo(id) {
    this.loading = true
    deleteIndustif(id).then(res => {
      if (res.data) {
        this.$message.success('删除产品成功！')
        this.getData()
      }
    }).catch(err => {
      console.log(err)
      this.$message.error('删除产品失败，请重试！')
    })
  }
}

}
</script>

<style scoped>
.fill {

border: 1px solid #ebeef5;

}
</style>

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

能写全 这个时什么情况

Answer 1

楼主，你好~
你的问题在于， el-option 中的 label 接收的是 string/number，而不能是 object。

改成下面代码试试看，亲测可以：

 <el-select multiple placeholder="请选择" v-model="scope.row.brand_type" value-key="key" :clearable="true">
   <el-option 
      v-for="(val, key) in enumBrandType" 
      :key="key" 
      :label="val[key+1]" 
      :value="val[key+1]">
   </el-option>
 </el-select>

---

如有帮助，麻烦点击下采纳，谢谢~