element中的表格,双击表格出现input框实现修改数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<el-table :data="tableDataList" @cell-dblclick="tableEdit">
<el-table-column
prop="itemName"
label="项目"
></el-table-column>
<el-table-column
prop="toleranceUp"
label="上公差"
></el-table-column>
<el-table-column
prop="toleranceDown"
label="下公差"
></el-table-column>
<el-table-column
prop="toleranceUnit"
label="单位"
></el-table-column>
</el-table>
其中“tableEdit” 是双击的方法,下面是方法内容
// 双击表格修改数据
tableEdit(row, column, cell, event) {
var self = this;
//想要那一列变化就写上那一列的名字 你们也可以自己写自己的判断 这只是一个例子
if (column.label == "上公差" || column.label == "下公差") {
var beforeVal = event.target.textContent;
event.target.innerHTML = "";
let str = `<div class='cell'>
<div class='el-input'>
<input type='text' placeholder='请输入内容' class='el-input__inner'>
</div>
</div>`;
cell.innerHTML = str;
// 获取双击后生成的input 根据层级嵌套会有所变化
let cellInput = cell.children[0].children[0].children[0];
cellInput.value = beforeVal;
cellInput.focus(); // input自动聚焦
// 失去焦点后 将input移除
cellInput.onblur = function() {
let onblurCont = `<div class='cell'>${cellInput.value}</div>`;
cell.innerHTML = onblurCont; // 换成原有的显示内容
// 调用axios接口
。。。。。。。。
//或者写自己的判断内容
self.addList(row);
};
}
},
addList(row) {
// 判断uuid是否重复
const existingItem = this.arrList.find(item => item.uuid === row.uuid)
if (existingItem) {
// 如果uuid重复,则覆盖以前的值
const index = this.arrList.indexOf(existingItem)
this.arrList[index] = row
} else {
// 如果uuid不重复,则将新对象添加到数组中
this.arrList.push(row)
}
},
//其中 this.arrList为你们自己设置的数组
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)