如何实现在使用element-ui中table的组件时可以实现编辑和增删改查功能（1.使用失去焦点事件，调用后端接口进行input框的查重。2.使用element UI 的row-click）

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"