vue下拉框 向后台同时传value和label值

<el-table-column label="供应商" width="200" header-align="center" align="center">
   <template slot-scope="scope">
        <el-select 
              v-if="tabClickId == scope.row.procurementId" 
              v-model="scope.row.supplier"
         >
            <el-option 
                  v-for="item in supplierOptions" 
                  :key="item.userId" 
                  :label="item.userName"
                  :value="`${item.userId}|${item.userName}`">
             </el-option>
         </el-select>
         <span v-else>{{scope.row.supplier}}</span>
   </template>
</el-table-column>
<el-table-column label="操作" width="200" fixed="right" header-align="center" align="center">
     <template slot-scope="scope">
        <el-button type="text" size="small" @click="save(scope.row)">提交</el-button>
     </template>
</el-table-column>




data(){
   return {
        tabClickId: "",
        // 供应商下拉框内容
        supplierOptions: [],
   }
},
methods: {
    // 提交编辑数据
    save(row) {
        const [lable, value] = row.supplier.split('|');
        row.supplier = value;
        row.supplierId = lable;
        RowsEdit(row).then(res => {
            this.$message({
               type: 'success',
               message: res.msg
            });
            this.tabClickId = null
        })
    },
}