VUE动态生成Element-UI的select不回显问题

话唠不话唠，直接说正题！

大概代码如下，在一个可展开的table里，点击展开按钮，加载select组件。

<!-- 省略前面代码 -->
    <!-- expandable table information -->
    <el-table-column type="expand">
      <template>
          <el-form :inline="true" :model="formInline"  size="mini" >
            <el-form-item label="查看方式">
              <el-select v-model="formInline.region" placeholder="select">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
      </template>
    </el-table-column>
<!-- 省略后面代码 -->
<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      }
    }
  }
}
</script>

以上内容均复制自element-ui官网

效果

当table表格展开后，加载一个下拉框，再点击下拉框加载其他内容。

但是这时会发现，无论选中什么，都不会回显。

在网上查了类似都问题，大多数都是因为异步加载导致都，解决方法大概有两类，如下：

1. this.$forceUpdate();
2. this.$set(targetObject,targetKey,targetValue);

两种方式我都尝试了，并不适合。

经过各种尝试，找到了适合自己都第三种方式，仅供大家参考：

  <!-- 省略前面代码 -->
      <!-- expandable table information -->
      <el-table-column type="expand">
        <!-- 在template模板上添加属性  slot-scope="scope" -->
        <template slot-scope="scope">
            <el-form :inline="true" :model="formInline"  size="mini" >
                <!-- 省略中间代码 -->
            </el-form>
        </template>
      </el-table-column>
<!-- 省略后面代码 -->