<template>
<div>
<el-table
:data="tableData"
stripe
style="width: 100%"
:row-class-name="tableRowClassName"
:cell-class-name="tableCellClassName"
@cell-click="handleCellClick"
>
<el-table-column prop="date" label="日期" width="180" align="center">
<template slot-scope="scope">
<el-input
size="small"
ref="sortNumRef"
@blur="inputBlur"
v-if="
scope.row.index === rowIndex && scope.column.index === columnIndex
"
v-model="scope.row.date"
></el-input>
<span v-else>{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180" align="center">
<template slot-scope="scope">
<el-input
size="small"
ref="sortNumRef"
@blur="inputBlur"
v-if="
scope.row.index === rowIndex && scope.column.index === columnIndex
"
v-model="scope.row.name"
></el-input>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址" align="center">
<template slot-scope="scope">
<el-input
size="small"
ref="sortNumRef"
@blur="inputBlur"
v-if="
scope.row.index === rowIndex && scope.column.index === columnIndex
"
v-model="scope.row.address"
></el-input>
<span v-else>{{ scope.row.address }}</span>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="handleSubmit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
rowIndex: -1, //行索引
columnIndex: -1, //列索引
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
methods: {
//把每一行的索引加到行数据中
tableRowClassName({ row, rowIndex }) {
row.index = rowIndex;
},
//把每一列的索引加到列数据中
tableCellClassName({ column, columnIndex }) {
column.index = columnIndex;
},
handleCellClick(row, column, cell, event) {
// console.log(row.index, "行索引", column.index, "列索引");
this.rowIndex = row.index;
this.columnIndex = column.index;
this.$nextTick(() => {
this.$refs.sortNumRef.focus();
});
},
// 失去焦点初始化
inputBlur(row, event, column) {
this.rowIndex = -1;
this.columnIndex = -1;
},
handleSubmit() {
console.log(this.tableData);
},
},
};
</script>
elementui的表格,单元格变成可编辑的
最新推荐文章于 2024-06-20 17:26:24 发布