VUE+Element UI实现简单的表格行内编辑效果

VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示

<el-table
                            class="tb-edit"
                            style="width: 100%"
                            size="mini"
                            highlight-current-row
                            @row-click="handleCurrentChange"
                            :data="tensRegulations"  ref="multipleTable"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                align="center"
                                prop="regulationsName"
                                label="制度名称"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="是否出台"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                            <template  slot-scope="scope">
                                <el-select  v-model="scope.row.isIntroduce" placeholder="请选择">
                                    <el-option
                                            v-for="item in isIntroduce"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                                <span>{{scope.row.isIntroduce}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="出台时间"
                                min-width="45%"
                                :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-date-picker
                                        style="width: 80%"
                                        v-model="scope.row.introduceTime"
                                        type="date"
                                        placeholder="选择日期"
                                        value-format="yyyy-MM-dd">
                                </el-date-picker>
                                <span>{{scope.row.introduceTime}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="本旬进展"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-select  v-model="scope.row.regulationsTensStatus" placeholder="请选择">
                                    <el-option
                                            v-for="item in tablePlan"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                                <span>{{scope.row.regulationsTensStatus}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="本旬执行情况"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-input @change="handleEdit(scope.$index, scope.row)" v-model="scope.row.executionStatus"></el-input><span>{{scope.row.executionStatus}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="累计执行情况"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.regulationsNextTensPlan"></el-input><span>{{scope.row.regulationsNextTensPlan}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                prop="title"
                                label="已印发文件"
                                min-width="21%"
                                :show-overflow-tooltip="true">
                            <el-table-column
                                    align="center"
                                    prop="title"
                                    label="发文名称"
                                    min-width="49%"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-input   v-model="scope.row.officeIssueName"></el-input><span>{{scope.row.officeIssueName}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="title"
                                    label="发文机关"
                                    min-width="21%"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-input   v-model="scope.row.officeIssueOrgan"></el-input><span>{{scope.row.officeIssueOrgan}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="title"
                                    label="发文文号"
                                    min-width="21%"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-input   v-model="scope.row.regulationsIssueDocument"></el-input><span>{{scope.row.regulationsIssueDocument}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="title"
                                    label="操作"
                                    min-width="21%"
                                    :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    <el-button @click="detailRow(scope.row)" type="text" size="small" >查看</el-button>
                                    <el-upload
                                            class="upload-demo"
                                            :file-list="tableFileList"
                                            :on-change="handleChangesTable"
                                            :before-upload="beforeCoverUpload"
                                            :on-exceed="handleExceedFile"
                                            :on-success="handleAvatarSuccess"
                                            :before-remove="beforeRemoveFile"
                                            action="https://jsonplaceholder.typicode.com/posts/"
                                            :http-request="handleChangeFileTable">
                                        <el-button size="small" type="primary" @click="upload(scope.row)">上传</el-button>
                                        <!--<div slot="tip" class="el-upload__tip">只能上传pdf/docx文件</div>-->
                                    </el-upload>
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
 data(){
            return{
            tensRegulations:[
                    {
                        executionStatus: "",
                        introduceTime: "",
                        isIntroduce: "",
                        officeIssueName: "",
                        officeIssueOrgan: "111",
                        regulationsIssueDocument: "",
                        regulationsIssueTime: "",
                        regulationsName: "河长会议制度",
                        regulationsNextTensPlan: "",
                        regulationsTensStatus: "",
                        regulationsUrl:''
                    },
                    {
                        executionStatus: "",
                        introduceTime: "",
                        isIntroduce: "",
                        officeIssueName: "",
                        officeIssueOrgan: "",
                        regulationsIssueDocument: "",
                        regulationsIssueTime: "",
                        regulationsName: "信息报送制度",
                        regulationsNextTensPlan: "",
                        regulationsTensStatus: "",
                        regulationsUrl:''
                    },
                ],
            }
          }，
          methods:{
          	handleEdit(index, row) {
                // console.log(index, row);
            },
            handleCurrentChange(row, event, column) {
                // console.log(row, event, column, event.currentTarget)
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
          }
          <style>
              .tb-edit .el-input {
        display: none
    }
    .tb-edit .current-row .el-input {
        display: block
    }
    .tb-edit .current-row .el-input+span {
        display: none
    }
    .tb-edit .current-row .el-select+span {
        display: none
    }
          </style>