在element的表格中添加编辑(input,输入框)
基于Element上在table中实现行数据单选、编辑
·
效果如下所示:
1、在表格中添加单选框
在el-table的文档中提供了一种type的方法,type=selection是多选的形式用select-all、select的方法改写为单选
// 单选项
dialogCheck(selection, row) {
this.$refs.multipleTable.clearSelection()
this.selectioned = {}
if (selection.length === 0) {
// 判断selection是否有值存在
return
}
if (row.id) {
this.selectioned = row
this.$refs.multipleTable.toggleRowSelection(row, true)
}
},
这样就完成了行数据单选。
2、表格编辑
将tableData添加一个字段来表示改行数据是否编辑的状态,此外我用的是isEdit来表示,用editData表示 正在编辑的数据。
<el-table-column label="右标签" prop="rightTags">
<template v-slot="scope">
<span v-show="!scope.row.isEdit">{{ scope.row.rightTags }}</span>
<el-input v-show="scope.row.isEdit" :ref="'inputFocus' + scope.$index" v-model="scope.row.rightTags" placeholder="请输入" class="input" />
</template>
</el-table-column>
<el-table-column label="操作" width="120px">
<template slot="header">
<span>操作</span>
<i class="el-icon-circle-plus" @click="add" />
</template>
<template v-slot="scope">
<el-link v-show="!scope.row.isEdit" :underline="false" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-link>
<el-link v-show="!scope.row.isEdit" :underline="false" type="danger" @click="deleteRow(scope.row)">删除</el-link>
<el-link v-show="scope.row.isEdit" :underline="false" type="primary" @click="save(scope.row)">保存</el-link>
<el-link v-show="scope.row.isEdit" :underline="false" type="info" class="cancel" @click="cancel(scope.row, scope.$index)">取消</el-link>
</template>
</el-table-column>
// 添加新的一行
add() {
// 保证只有一个在编辑状态
if (this.list.some((item) => item.isEdit)) {
this.$message({
type: 'warning',
message: '请先保存正在编辑的条件模板内容!'
})
} else {
this.list.push({ ...DEFAULT_DATA })
}
},
// 编辑
edit(index, item) {
const currIndex = this.list.findIndex((item) => item.isEdit)
// 保证只有一个在编辑状态
if (currIndex !== -1) {
this.cancel(currIndex)
}
this.editData = JSON.parse(JSON.stringify(this.list[index]))
this.list[index].isEdit = true
},
// 取消
cancel(index) {
// 取消操作
if (!this.list[index].id) {
this.list.splice(index, 1)
} else {
this.$set(this.list, index, JSON.parse(JSON.stringify(this.editData)))
this.editData = null
}
}
这样就完成了。
更多推荐
已为社区贡献1条内容
所有评论(0)