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

亦凉 2022-04-18 03:59 527阅读 0赞

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
        <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-input {
        display: none
    }
    .tb-edit .current-row .el-input {
        display: block
    }
    .tb-edit .current-row .el-input+span {
        display: none
    }
        </style>
    </head>
    
    <body>
        <div id="app">
            <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>
            <br>数据:{
       {tableData}}</div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            },
            methods: {
                handleCurrentChange(row, event, column) {
                    console.log(row, event, column, event.currentTarget)
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                }
            }
        })
    </script> 
    </html>

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示