vue element table中使用select,select值改变视图不变

解决:

将已更改的最新的数组数据深拷贝并重新赋值给原数组

代码示例

<template>
  <section class='table-wrapper'>
    <el-table class="option-table"
              :border="true"
              :data="optionList"
              tooltip-effect='light'
              style="width: 100%">
      <el-table-column width='80'>
        <template slot-scope="scope">选择</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip
                      prop="title"
                      min-width='100'
                      label="选项">
      </el-table-column>
      <el-table-column prop="sceneSearchCount"
                      min-width='110'
                      label="跳转到">
        <template slot-scope="scope">
          <span class="search-select-box">
            <el-select
              v-model="scope.row.targetId"
              clearable
              @change="changeOptionTarget()"
              placeholder="请选择要跳转到的题目">
              <el-option
                v-for="item in targetQuestionList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script>
export default {
  data () {
    return {
      optionList: [], // 当前题目选项列表
      targetQuestionList: [ // 可以选择的目标题列表
        {label: '不跳转,按顺序填写下一题', id: 0},
        {label: '跳到问卷末尾结束作答', id: 1},
        {label: '直接提交为无效答卷', id: -1}
      ],
    }
  },
  methods: {
    // 表格下拉菜单
    changeOptionTarget () {
      let optionList = JSON.parse(JSON.stringify(this.optionList))
      this.optionList = optionList
    }
  }
}
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容