elementUI表格实现可编辑和增加行功能--直接复制即可
程序员文章站
2022-06-22 19:44:24
结构:
新建任务
结构:
<div class="twoTable fuceng">
<div class="h_top">
<span>新建任务</span>
<img src="../../../../static/img/close.png" alt="" @click="close_twoTableDelete">
</div>
<div class="h_center">
<div class="task_2">
<div class="selectInfo inputBorder" >
<input v-model="keyword2" type="text" placeholder="请输入你想搜索的描述信息">
<img src="../../../../static/img/select1.png" alt="">
</div>
</div>
<div class="task_2_table task_3_btn">
<el-table
:data="tableData"
height="200"
@cell-dblclick="tableDbEdit"
style="width: 100%">
<el-table-column
prop="date"
label="字段名">
</el-table-column>
<el-table-column
prop="name"
label="描述信息"
>
</el-table-column>
<el-table-column
prop="address"
label="操作">
<template slot-scope="scope">
<el-button type="primary" plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="h_foot">
<span class="btn" @click="add_twoTableDelete">新增</span>
<span class="btn" @click="keep_twoTableDelete">暂存</span>
</div>
</div>
在data中定义tableData:
tableData: [{
date: '1',
name: '王小虎',
address: '上海市普'
},{
date: '1',
name: '王小虎',
address: '上海市普'
}],
在methods中定义方法:
//编辑表格
tableDbEdit(row, column, cell, event) {
console.log(row, column, cell, event);
if (column.label != "操作") {//哪些字段不可编辑,可以在if里面做限制,可编辑的字段往下执行
event.target.innerHTML = "";
//双击添加一个input框
let cellInput = document.createElement("input");
cellInput.value = "";
//设置input框的类型,宽,padding,边框,圆角等都可以自己设置
cellInput.setAttribute("type", "text");
cellInput.style.width = "80%";
cellInput.style.padding = "0px"
cellInput.style.border = "1px solid #288EFE";
cellInput.style.borderRadius = "3px";
cell.appendChild(cellInput);
//当鼠标失去焦点时,判断输入是否为空,为空的话可以删除input
cellInput.onblur = function() {
if(cellInput.value==""&&column.label=="字段名"){
message_w("字段名不能为空")
cellInput.style.border = "1px solid #FD1B1E";
}else{
cell.removeChild(cellInput);
event.target.innerHTML = cellInput.value;
}
};
}
},
//新增表格
add_twoTableDelete(){
this.tableData.push({
date: 'now',
name: '新增的',
address: '上海市普'
})
},
样式我就不粘了,methods中的两个方法,可以自己定义并添加到某个按钮上,下面是我的页面:
编辑的话就双击就好了,字段名和描述信息都可以编辑
点击新增就是在表格尾部增加一行自己定义的
本文地址:https://blog.csdn.net/qq_41579104/article/details/107387524
下一篇: 设置U盘只读方式