element前端ui组件挺美观的,我们也使用了他们的table组件,但是默认没有提供行编辑功能,我们可以通过将table的每个单元格换成input框来巧妙实现。默认每个单元格就是一个template数据填充,不可编辑;我们可以在template里面包裹一个input框来实现单元格可编辑;等每一个单元格都可编辑的时候,我们可以在每一行后面加一个按钮来控制只可编辑当前行。
先来看一下原始不可编辑的写法:
<el-table
:data="testYuanCheckTableData"
type = 'textarea'
@row-click="handdleRow" //点击行,获取行数据信息
style="width: 100% ;text-align:center">
<el-table-column
label="序号"
width="80"
prop="srcColumnSqc">
<template slot-scope="scope">
{
{ scope.row.srcColumnSqc}}
</template>
</el-table-column>
<el-table-column
label="列名"
prop= "srcColumn"
show-overflow-tooltip>
<template slot-scope="scope">
{
{ scope.row.srcColumn}}
</template>
</el-table-column>
<el-table-column
prop="srcColumnName"
label="中文"
show-overflow-tooltip>
<template slot-scope="scope">
{
{ scope.row.srcColumnName}}
</template>
</el-table-column>
<el-table-column
prop="srcColumnType"