vue+element使用el-select选择器中value值采用拼接方式

最近在做一个项目，想要拼接选择器的value值，解决方法：

<el-form-item label="依赖表：" prop="dependTables">
  <el-select v-model="calculateForm.dependTables" multiple filterable  placeholder="请选择" style="width:100%">
    <el-option
      v-for="item in allDependTables"
      :key="item.tableName"
      :value-key="item.tableName"
      :label="item.tableName"
      :value="`${item.level}.${item.tableName}`">
      <span style="float: left">{{ item.tableName }}</span>
      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.level }}</span>
    </el-option>
  </el-select>

</el-form-item>

上述绑定的 v-model="calculateForm.dependTables" 是从后台回显的数据，数据对象为下列示例：

export default {
    data() {
        return {
            calculateForm : {
              dependTables: ['stg.stg_table_1','app.app_table_2']
            }
        }
}

最后显示如下：

感谢链接：https://blog.csdn.net/qq_28584685/article/details/84099038