表格行内编辑使用v-if/v-show控制，不生效

问题描述

在vue中，例如使用 el-table-colnum 组件中使用 v-if 或 v-show 作 行内编辑 ，按一次生效，在按按钮 取消 或者 提交时，输入框不隐藏， v-if 或 v-show 不生效。

html 页面代码

<el-table
	v-loading="listLoading"
	:data="list" border fit highlight-current-row style="width: 100%">
	<!--行内编辑表格 edit:控制编辑状态 布尔类型 -->
      <el-table-column min-width="300px" label="Title">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.title" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              icon="el-icon-refresh"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Actions" width="120">
        <template slot-scope="{row}">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="confirmEdit(row)"
          >
            确认
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="handleEdit"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

javascript 事件处理函数

// 获取数据列表函数
async getList() {
	this.listLoading = true
	const { data } = await fetchList(this.listQuery)
	const items = data.items
	this.listLoading = false
},
// 编辑事件处理函数
handleEdit(row) {
	row.edit = true
	row.originalTitle = row.title
},
// 取消编辑事件处理函数
cancelEdit(row) {
	row.title = row.originalTitle
    row.edit = false
    this.$message({
    	message: 'The title has been restored to the original value',
        type: 'warning'
    })
},
// 确认编辑处理函数
confirmEdit(row) {
	row.edit = false
	row.originalTitle = row.title
	this.$message({
		message: 'The title has been edited',
		type: 'success'
	})
}

产生原因

原对象中没有 edit属性，向对象中新增属性时，
Vue无法监听新增的属性的数据变化，从而无法触发视图的改变。
v-if 或 v-show 监听到的数据还是默认值

解决办法

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

• 返回值：设置的值。

• 用法 ：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

• 方法一 （推荐）

在获取数据时，使用 Vue.set() 来新增属性

https://vuejs.org/v2/guide/reactivity.html

// 获取数据列表函数
async getList() {
	this.listLoading = true
	const { data } = await fetchList(this.listQuery)
	const items = data.items
	// 在数组对象中 ，使用 Vue.set() 来新增属性
    this.list = items.map(v => {
    	this.$set(v, 'edit', false)
        v.originalTitle = v.title
        return v
    })
	this.listLoading = false
},
async getList() {
      this.listLoading = true
      const { data } = await fetchList(this.listQuery)
      const items = data.items
      
      // 在数组对象中 ，使用 Vue.set() 来新增属性
      this.list = items.map(v => {
        this.$set(v, 'edit', false)
        v.originalTitle = v.title
        return v
      })
      
      this.listLoading = false
    },

• 方法二 （不推荐）

也可以在点击 编辑 按钮的事件处理函数中，使用Vue.set() 来新增属性。

handleEdit(row) {
	this.$set(row, 'edit', true)
}