0
点赞
收藏
分享

微信扫一扫

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

飞空之羽 2022-03-18 阅读 90

问题描述

在vue中,例如使用 el-table-colnum 组件中使用 v-ifv-show行内编辑 ,按一次生效,在按按钮 取消 或者 提交时,输入框不隐藏, v-ifv-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-ifv-show 监听到的数据还是默认值

解决办法

  • 方法一 (推荐

在获取数据时,使用 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)
}

举报

相关推荐

v-show和v-if

v-if VS v-show 2.0

Vue指令:v-show、v-if

Vue v-if与v-show区别

v-if与v-show的区别?

v-if vs v-show vs v-for

v-if与v-show的区别

【v-if与v-show的区别】

0 条评论