vue+Element ui 可编辑表格

 

1.利用css属性绑定，事件触发<span>与<el-input>和<el-select>的展示与否，将表格列模板中写出两种展现格式，通过控制css实现

<el-table :data="dataList" class="tb-edit" style="width: 100%" max-height="260" highlight-current-row @row-dblclick="handleCurrentChange">
    <el-table-column label="参数类型" width="180" :show-overflow-tooltip="true" header-align="center" align="center" >
        <template scope="scope">
            <el-select size="small" v-model="scope.row.paramType" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)">
                <el-option v-for="item in paramTypeList" :label="item.paramKey"  :value="item.paramValue" ></el-option>
            </el-select>
                <span>{{scope.row.paramType}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="paramName" label="参数名称" :show-overflow-tooltip="true" header-align="center" align="center" width="180">
        <template scope="scope">
            <el-select size="small" v-model="scope.row.paramName" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)">
                <el-option v-for="item in paramNameList" :label="item.paramKey"  :value="item.paramValue" ></el-option>
            </el-select> <span>{{scope.row.paramName}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="paramCode" header-align="center" :show-overflow-tooltip="true" align="center" label="参数编码">
        <template scope="scope">
            <el-select size="small" v-model="scope.row.paramCode" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)">
                <el-option v-for="item in paramCodeList" :label="item.paramKey"  :value="item.paramValue" ></el-option>
            </el-select>  <span>{{scope.row.paramCode}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="param" header-align="center" :show-overflow-tooltip="true" align="center" label="参数值">
        <template scope="scope">
            <el-input size="small" v-model="scope.row.param" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)">
            </el-input>  <span>{{scope.row.param}}</span>
        </template>
    </el-table-column>
    <el-table-column  header-align="center" align="center" label="操作">
        <template scope="scope">
            <el-button size="small" @click="updateHandle(scope.$index, scope.row)">保存</el-button>
            <el-button size="small" type="danger" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
    </el-table-column>
</el-table>


<style>
    * {
        margin: 0;
        padding: 0
    }
    body {
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
        overflow: auto;
        font-weight: 400;
        -webkit-font-smoothing: antialiased;
    }
    .tb-edit .el-select  {
        display: none
    }
    .tb-edit .el-input  {
        display: none
    }
    .tb-edit .current-row .el-select {
        display: block
    }
    .tb-edit .current-row .el-input{
        display: block
    }
    .tb-edit .current-row .el-select+span {
        display: none
    }
    .tb-edit .current-row .el-input+span {
        display: none
    }
</style>


handleCurrentChange(row, event, column) {
    console.log(row, event, column, event.currentTarget)
},
updateHandle(index, row) {
    vm.loadingText = '正在提交数据...'
    vm.dataListLoading = true
    http.post('/task/param/editUpdate' ,{
        'id': row.id || undefined,
        'taskTemplateId':vm.dataForm.id,
        'paramCode':row.paramCode,
        'paramName': row.paramName,
        'paramType': row.paramType,
        'param': row.param,
    }).then(function (data) {
        vm.dataListLoading = false
        vm.$message({
            type: 'success',
            message: '操作成功'
        })
        vm.requestParameter()
        // window.parent.layerEmit("success", saveOrUpdateStr);
    }).catch(function () {
        vm.dataListLoading = false
    })

},