el-table嵌入输入框
el-table嵌入输入框
·
一、vue+Element 实现table表格可编辑(select下拉框 input输入框)
1、聚焦在当前行的时候,可以进行文本的编辑,或者下拉框的选择,主要用到 highlight-current-row 这个样式
2、借助template组件进行编辑
<el-table :data="columnData" style="width: 100%;margin-top: 20px" highlight-current-row
@row-click="handleCellChange">
<el-table-column prop="columnName" label="字段">
<template scope="scope">
<el-input size="small" v-model="scope.row.columnName" placeholder="请输入内容"
@change="handleCellEdit(scope.$index, scope.row)"></el-input>
</template>
</el-table-column>
<el-table-column prop="isSensitive" label="敏感字段" width="120">
<template scope="scope">
<el-select v-model="scope.row.isSensitive" @change="handleCellEdit(scope.$index, scope.row)">
<el-option v-for="item in sensitiveOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, columnData)">删除</el-button>
</template>
</el-table-column>
</el-table>
handleCellChange(row, event, column) {
console.log("row=" + row)
console.log("event=" + event)
console.log("column=" + column
},
handleCellEdit(index, row) {
console.log(index, row);
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
二、vue elementUI el-table 表格双击可编辑
<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>
更多推荐
所有评论(0)