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

最新推荐文章于 2024-04-25 19:57:12 发布

原创最新推荐文章于 2024-04-25 19:57:12 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

JavaScript 同时被 3 个专栏收录

17 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

前端

11 篇文章

订阅专栏

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

使用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>