列表内容可编辑

最新推荐文章于 2024-10-18 15:58:53 发布

new code Boy

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量389

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_46344419/article/details/135654029

版权

本文介绍了如何在Vue应用中使用ElementUI的el-table组件创建动态表格，通过模板列和布尔值控制字段的显示和输入，实现实时数据修改与状态切换。

摘要由CSDN通过智能技术生成

<template>
<div id="app">
    <el-table :data="dataList" style="width: 100%;" size="small">
        <el-table-column label="序号" width="140" width="60" prop="num" v-model="dataList.num"></el-table-column>
        <el-table-column label="名称" width="120">
            <!-- 通过isnameSelected显示或隐藏 -->
            <template slot-scope="scope">
                <el-input v-if="scope.row.isnameSelected" v-model="scope.row.name"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.name}}</p>
            </template>
        </el-table-column>
        <el-table-column label="年龄" width="120">
            <!-- 通过isageSelected显示或隐藏 -->
            <template slot-scope="scope">
                <el-input v-if="scope.row.isageSelected" v-model="scope.row.age"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.age}}</p>
            </template>
        </el-table-column>
        <el-table-column label="金额" width="120">
            <template slot-scope="scope">
                <!-- 通过issalSelected显示或隐藏 -->
                <el-input v-if="scope.row.issalSelected" v-model="scope.row.money"
                    @focus="focusEvent(scope.row,scope.$index,scope.column)"
                    @blur="blurEvent(scope.row,scope.$index,scope.column)" v-focus></el-input>
                <p @click="cellClick(scope.row, scope.column)" v-else>{{scope.row.money}}</p>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>
    <script>
        new Vue({
            el: "#app",
            data: {
                dataList: [
                    { name: "测试1", age: 24, num: 10010, money: "1200" },
                    { name: "测试2", age: 24, num: 10011, money: "1200" },
                    { name: "测试3", age: 24, num: 10012, money: "1200" },
                    { name: "测试4", age: 24, num: 10013, money: "1200" }
                ]
            },
            created() {
                this.getList()
            },
            //自定义获取焦点指令
            directives: {
                focus: {
                    inserted: function (el) {
                        el.querySelector('input').focus()
                    }
                }
            },
            methods: {
            // 数据添加布尔值
                getList() {
                    this.dataList = this.dataList.map((item) => {
                        return { ...item, isnameSelected: false, isageSelected: false, issalSelected: false }
                    });
                },
                // 存储当前值
                focusEvent(row, index, column) {
                    if (column.label == "名称") {
                        row.oldName = row.name
                    } else if (column.label == "年龄") {
                        row.oldAge = row.age
                    } else if (column.label == "金额") {
                        row.oldSal = row.money
                    }
                },
                // 失去焦点触发
                blurEvent(row, curIndex, column) {
                    if (column.label == "名称") {
                        row.isnameSelected = !row.isnameSelected
                        if (row.name !== row.oldName) {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            })
                        }
                    } else if (column.label == "年龄") {
                        row.isageSelected = !row.isageSelected
                        if (row.age !== row.oldAge) {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            })
                        }
                    } else if (column.label == "金额") {
                        row.issalSelected = !row.issalSelected
                        if (row.money !== row.oldSal) {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            })
                        }
                    }
                },
                // 内容切换
                cellClick(row, column) {
                    if (column.label == "名称") {
                        row.isnameSelected = !row.isnameSelected
                    } else if (column.label == "年龄") {
                        row.isageSelected = !row.isageSelected
                    } else if (column.label == "金额") {
                        row.issalSelected = !row.issalSelected
                    }
                }
            }
        });
    </script>