话唠不话唠，直接说正题！
大概代码如下，在一个可展开的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>
<!-- 省略后面代码 -->
