vue elementUI el-table 表格双击可编辑
<template>//表格也可以写成原生的table<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit"><el-table-column property="order1" label="顺序"></el-tabl...
·
<template>
//表格也可以写成原生的table
<el-table :data="addPlanRoute" border style="width:100%" @cell-dblclick="tableDbEdit">
<el-table-column property="order1" label="顺序"></el-table-column>
<el-table-column property="order2" label="装车点">
<template slot-scope="scope">
<el-input v-model="scope.row.order2" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default{
data(){
return{}
},
methods:{
tableDbEdit(row, column, cell, event) {
console.log(row, column, cell, event);
if (column.label != "顺序") {
event.target.innerHTML = "";
let cellInput = document.createElement("input");
cellInput.value = "";
cellInput.setAttribute("type", "text");
cellInput.style.width = "80%";
cell.appendChild(cellInput);
cellInput.onblur = function() {
cell.removeChild(cellInput);
event.target.innerHTML = cellInput.value;
};
}
}
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)