VUE et Element UI effectuent l'édition en ligne des tableaux-js tutoriel-php.cn

VUE et Element UI effectuent l'édition en ligne des tableaux

php中世界最好的语言

Libérer： 2018-03-12 11:27:06

original

8878 Les gens l'ont consulté

Cette fois, je vais vous présenter VUE et Element UI pour effectuer l'édition en ligne des tableaux. Quelles sont les précautions pour effectuer l'édition en ligne des tableaux avec VUE et Element UI. Voici une application pratique. cas, jetons un coup d'oeil.

VUE et Element UI effectuent lédition en ligne des tableaux

démo

Le principe est de contrôler le contrôle d'entrée lié et d'afficher la valeur via Css, et de masquer ou d'afficher le contrôle sous le style de ligne sélectionné

<!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" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <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: &#39;#app&#39;,        data: {            tableData: [{                date: &#39;2016-05-02&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1518 弄&#39;
            }, {                date: &#39;2016-05-04&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1517 弄&#39;
            }, {                date: &#39;2016-05-01&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1519 弄&#39;
            }, {                date: &#39;2016-05-03&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1516 弄&#39;
            }]
        },        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>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment envoyer des e-mails via la boîte aux lettres qq en python3

Explication détaillée de la séparation des front- développement end et back-end de Golang+Nodejs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!