收集整理element-ui 表格组件的常用操作方法

一、简单的表格行内编辑效果

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示。
1、注意下样式的设置
2、change事件 @change="handleEdit(scope.$index, scope.row)"
3、当前行点击@row-click="handleCurrentChange"

<style>
    .tb-edit .el-input {
        display: none
    }
    .tb-edit .current-row .el-input {
        display: block
    }
    .tb-edit .current-row .el-input+span {
        display: none
    }
</style>

<el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
    <el-table-column label="日期" width="180">
        <template scope="scope">
            <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
        </template>
    </el-table-column>
    <el-table-column label="姓名" width="180">
        <template scope="scope">
            <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
        <template scope="scope">
            <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
        </template>
    </el-table-column>
    <el-table-column label="操作">
        <template scope="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
    </el-table-column>
</el-table>

2、点击编辑按钮进行编辑实现示例

<el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
    <el-table-column type="index"></el-table-column>
    <el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
        <template slot-scope="scope">
            <span v-if="scope.row.isSet">
                <el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
                </el-input>
            </span>
            <span v-else>{{scope.row[v.field]}}</span>
        </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
        <template slot-scope="scope">
            <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
                {{scope.row.isSet?'保存':"修改"}}
            </span>
            <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="pwdDelete(scope.row,scope.$index,true)"
>
                删除
            </span>
            <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
                取消
            </span>
        </template>
    </el-table-column>
</el-table>
<script>
    //id生成工具 这个不用看 示例而已 模拟后台返回的id
    var generateId = {
        _count: 1,
        get(){return ((+new Date()) + "_" + (this._count++))}
    };
    //主要内容
    var app = new Vue({
        el: "#app",
        data: {
            master_user: {
                sel: null,//选中行
                columns: [
                    { field: "type", title: "类型", width: 120 },
                    { field: "addport", title: "地址", width: 150 },
                    { field: "user", title: "用户", width: 120 },
                    { field: "pwd", title: "密码", width: 220 },
                    { field: "info", title: "其他" }
                ],
                data: [],
            },
        },
        methods: {
            //读取表格数据
            readMasterUser() {
                //根据实际情况，自己改下啊
                app.master_user.data.map(i => {
                    i.id = generateId.get();//模拟后台插入成功后有了id
                    i.isSet=false;//给后台返回数据添加`isSet`标识
                    return i;
                });
            },
            //添加账号
            addMasterUser() {
                for (let i of app.master_user.data) {
                    if (i.isSet) return app.$message.warning("请先保存当前编辑项");
                }
                let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
                app.master_user.data.push(j);
                app.master_user.sel = JSON.parse(JSON.stringify(j));
            },
            //修改
            pwdChange(row, index, cg) {
                //点击修改 判断是否已经保存所有操作
                for (let i of app.master_user.data) {
                    if (i.isSet && i.id != row.id) {
                        app.$message.warning("请先保存当前编辑项");
                        return false;
                    }
                }
                //是否是取消操作
                if (!cg) {
                    if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
                    return row.isSet = !row.isSet;
                }
                //提交数据
                if (row.isSet) {
                    //项目是模拟请求操作  自己修改下
                    (function () {
                        let data = JSON.parse(JSON.stringify(app.master_user.sel));
                        for (let k in data) row[k] = data[k];
                        app.$message({
                            type: 'success',
                            message: "保存成功!"
                        });
                        //然后这边重新读取表格数据
                        app.readMasterUser();
                        row.isSet = false;
                    })();
                } else {
                    app.master_user.sel = JSON.parse(JSON.stringify(row));
                    row.isSet = true;
                }
            }
        },
        pwdDelete(row, index, cg){
            app.master_user.data.splice(row, 1)
        }
    });
</script>

延申：如果表格中的每行，数据形式都不一样，有文本、密码、日期、下拉框等等，那我们渲染表格中每一列数据的时候，分别判断渲染。

三、表格每行的数据删除（前端删除）

<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="pwdDelete(scope.row,scope.$index,true)"
>删除</span>
<script>
methods: {
    pwdDelete(row, index, cg){
        app.master_user.data.splice(row, 1)
    }
}
</script>

总结：针对表格的操作，无非就是数据的操作，可能渲染不同的ui控件可能复杂点，加些数据校验，其它没有什么难点，希望这篇文章能帮到你。