Vue.js实现编辑操作时一行内容单独修改的实现思路

实现功能(效果图)

问题记录

在实现以上效果图功能时,我是想到了定义一个标杆来控制点击某行编辑按钮时,对该行相关标签进行显示与隐藏,但是因为标杆是一个而数据时根据后台返回的数据进行渲染的,有很多行这样就造成了不管点击哪一个编辑按钮,所有行的对应标签都改变了状态,而不是我想实现的点击哪一行哪一行对应标签改变状态.

后台返回数据

{cateName:"8888",id:13820,state:1,userid:73768},
{cateName:"6666",id:12860,state:1,userid:74768}

布局代码

<el-table-column label="分类名称" width="200">
    <template slot-scope="scope">
        <span v-if="flag">{{ scope.row.cateName }}</span>
        <el-input v-else v-model="scope.row.cateName" size="mini"></el-input>
    </template>
</el-table-column>

<!-- 操作 -->
<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button
            size="mini"
            :type="scope.row.flag ? '' : 'success'"
            @click="edit(scope.row)">编辑</el-button>
        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
    </template>
</el-table-column>

功能代码

data() {
    return {
        flag:true;
    };
},

async edit(row) {
    this.flag = !this.flag
},

实现思路

看到以上问题,我想到了能不能对返回的数据进行修改,在每一个数据对象中添加一个标杆,我就可以利用数据里的标杆实现某行内容的单独修改.

修改后的数据

{cateName:"8888",id:13820,state:1,userid:73768,flag:true},
{cateName:"6666",id:13580,state:1,userid:72766,flag:true},

实现代码

布局代码

<!-- 账号 -->
<el-table-column label="分类名称" width="200">
    <template slot-scope="scope">
        <span v-if="scope.row.flag">{{ scope.row.cateName }}</span>
        <el-input v-else v-model="scope.row.cateName" size="mini"></el-input>
    </template>
</el-table-column>

<!-- 操作 -->
<el-table-column label="操作">
    <template slot-scope="scope">
        <el-button
            size="mini"
            :type="scope.row.flag ? '' : 'success'"
            @click="edit(scope.row)"
        >
            {{ scope.row.flag ? "编辑" : "完成" }}</el-button
        >
        <el-button size="mini" type="danger" @click="del(scope.row)"
            >删除</el-button
        >
    </template>
</el-table-column>

功能代码

async edit(row) {
    if (row.flag) {
        row.flag = !row.flag;
    } else {
        await editcate(row);
        row.flag = !row.flag;
    }
},

修改后台返回数据代码

this.tableData = res.data.data.map((item) => ({ ...item, flag: true }));

全部代码

我这里写的是一个函数,因为很多地方都需要使用,只需要在需要的地方调用就可以

async getData() {
    // 异步获取用户列表数据
    let res = await catelist({
        // 传入分页参数
        currentPage: this.page, // 当前页码
        pageSize: this.pageSize, // 每页数据条数
    });

    // 将用户列表数据加工成新数据并存储
    this.tableData = res.data.data.map((item) => ({
        ...item, // 将item对象的所有属性拷贝到新建立的对象中
        flag: true, // 添加一个名为"flag"的新属性，值为true
    }));

    // 存储总条数，以供分页使用
    this.total = res.data.total; // 总条数
}

完整代码

<template>
    <el-card>
        <div slot="header">
            <span>商品分类</span>
            <el-button
                style="float: right"
                type="primary"
                size="mini"
                @click="addState = true"
                >添加分类</el-button
            >
        </div>

        <el-table :data="tableData" style="width: 100%">
            <!-- 序号 -->
            <el-table-column label="序号" width="200" prop="id"> </el-table-column>
            <!-- 账号 -->
            <el-table-column label="分类名称" width="200">
                <template slot-scope="scope">
                    <span v-if="scope.row.flag">{{ scope.row.cateName }}</span>
                    <el-input v-else v-model="scope.row.cateName" size="mini"></el-input>
                </template>
            </el-table-column>

            <!-- 是否启用 -->
            <el-table-column label="是否启用" width="180">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.state"
                        :active-value="1"
                        :inactive-value="0"
                        @change="changOn(scope.row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        :type="scope.row.flag ? '' : 'success'"
                        @click="edit(scope.row)"
                    >
                        {{ scope.row.flag ? "编辑" : "完成" }}</el-button
                    >
                    <el-button size="mini" type="danger" @click="del(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 
        @current-change="currentPage" 当前页码改变时触发
        :current-page="page" 当前在第几页上
        :page-size="pageSize" 每页显示多少条
        layout="total, sizes, prev, pager, next, jumper"  页码栏的布局
        :total="400"  数据的总条数
        -->
        <el-pagination
            @current-change="currentPage"
            :current-page="page"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>

        <!-- 新增分类 -->
        <el-drawer title="添加分类" :visible.sync="addState" direction="rtl">
            <el-form :model="addForm" label-width="100px">
                <el-form-item label="分类名称">
                    <el-input v-model="addForm.cateName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch
                        v-model="addForm.state"
                        :active-value="1"
                        :inactive-value="0"
                    >
                    </el-switch>
                    <el-form-item>
                        <el-button type="primary" @click="add">确定</el-button>
                        <el-button @click="addState = false">取消</el-button>
                    </el-form-item>
                </el-form-item>
            </el-form>
        </el-drawer>
    </el-card>
</template>

<script>
import { catelist, delcate, editcate, addcate } from "@/api/goods.js";
export default {
    data() {
        return {
            tableData: [],
            // 分页
            pageSize: 5, //每页显示多少条
            page: 1, // 当前在第几页上
            total: 0, // 数据总条数
            addState: false, //添加分类的抽屉
            addForm: {
                cateName: "",
                state: 1,
            },
            value: true, //开启或关闭
        };
    },
    async created() {
        // 调用渲染方法
        this.getData();
    },

    methods: {
        // 开启关闭分类
        async changOn(row) {
            await editcate(row);
        },
        // 添加分类
        async add() {
            let res = await addcate(this.addForm);
            if (res.data.code === 0) {
                this.addState = false;
                // 调用渲染方法
                this.getData();
            }
        },

        // 修改事件
        async edit(row) {
            if (row.flag) {
                row.flag = !row.flag;
            } else {
                await editcate(row);
                row.flag = !row.flag;
            }
        },
        // 删除事件
        async del(row) {
            let res = await delcate({ id: row.id });
            if (res.data.code === 0) {
                this.getData();
            }
        },

        // 分页的方法

        // 当前页改变时触发
        currentPage(val) {
            this.page = val;
            // 调用渲染方法
            this.getData();
        },

        // 获取数据,渲染到页面上
        async getData() {
            // 读取用户列表数据
            let res = await catelist({
                currentPage: this.page,
                pageSize: this.pageSize,
            });
            this.tableData = res.data.data.map((item) => ({ ...item, flag: true }));

            // 分页
            this.total = res.data.total; //总条数
        },
    },
};
</script>

<style lang="less" scoped>
// 分页样式
.el-pagination {
    margin-top: 20px;
}

// 分类修改输入框
.el-card__body {
    .el-input {
        width: 160px;
    }
}
.el-input {
    width: 206px;
}
</style>

以上就是我个人的思路方案,如果小伙伴们有更好的方案欢迎进行探讨哦.