效果如图
加号为点击新增一行表单
新增完后的效果
点击加号后新增一行的效果
双击表单的效果 点击表单修改
双击表单某一项可以直接在表格上修改
修改后input失焦后的效果
下面是代码实现：
页面el-table代码
<el-table
:data="updateTable" //此处为table表需要渲染的数据 这里我们给了个 默认填写人的数据 根据需求自己可以调节
style="width: 100%"
max-height="200px"
@cell-dblclick="cellClick" //双击事件
>
<el-table-column
label="序号"
type="index"
width="120px"
>
</el-table-column>
<el-table-column
label="选项"
>
<template slot-scope="scope">
<span v-if="scope.row.show" >{{scope.row.name}}</span> //显示的数据
<el-input //双击后出现的输入框
v-else
ref="editInput"
v-model="scope.row.name"
@blur="noBlur(scope)" //失去焦点的事件
></el-input>
</template>
</el-table-column>
<el-table-column
label="选项描述"
>
<template slot-scope="scope">
<span v-if="scope.row.tx" >{{scope.row.content}}</span>
<el-input
v-else
ref="editInput"
v-model="scope.row.content"
maxlength="250"
@blur="txBlur(scope)"
></el-input>
</template>
</el-table-column>
<el-table-column
v-if="!status"
label="操作"
>
<template slot-scope="scope">
<el-button
type="text"
:disabled="scope.row.disabled"
@click.native.prevent="_del(scope.$index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
js代码逻辑
// 新增表单
_add() {
this.updateTable.push({name: '选项名称', content: '', show: true, tx: true, disabled: false}) //show和tx用于判断选项和选项描述是 否显示逻辑
},
// 点击出现ipt
cellClick(row,c) {
if(c.label == '选项' && !row.disabled) {
row.show = false
}else if(c.label == '选项描述') {
row.tx = false
}else {
return false
}
this.$nextTick(() => {
this.$refs['editInput'].focus() //聚焦
this.$refs['editInput'].select() //选中
})
},
//失去焦点处发的事件主要是隐藏输入框 显示 span标签
noBlur(scope) {
scope.row.show = true
},
txBlur(scope) {
scope.row.tx = true
},
// 删除表
_del(index) {
this.updateTable.splice(index,1)
},
网友评论