element的table里面用select，数据无法动态更新问题

onYang

于 2022-12-22 11:26:04 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 前端 vue 文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/q12as/article/details/128406356

版权

JavaScript 同时被 3 个专栏收录

17 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

前端

11 篇文章

订阅专栏

在使用ElementUI开发时遇到一个问题，即在表单内嵌套的表格无法动态更新选择器的数据。解决这个问题的关键在于添加`slot-scope=scope`到模板中。通过给`<el-table-column>`添加这一属性，并结合`v-model`和`v-for`，可以确保后端数据变化时表格中的下拉选择器同步更新。这样做能够有效地解决数据不更新的问题，提高前端界面的响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用elementui时，在表单内嵌套表格，后端数据没有问题，但是选择器无数据，数据没有动态更新，可以直接给template加上一个slot-scope="scope"就能解决问题


              <el-table-column
                prop="selectValue"
                label="选择"
                align="center"
              >
                <template slot-scope="scope">
                  <el-select
                    v-model="ruleForm.selectid"
                    placeholder="请选择"
                    class="selectSex"
                    @change="selectChange"
                  >
                    <el-option
                      v-for="item in foot"
                      :key="item.id"
                      :label="item.selectValue"
                      :value="item.id"
                    />
                  </el-select>
                </template>
              </el-table-column>