recherche

Maison  >  Article  >  interface Web  >  VUE et Element UI effectuent l'édition en ligne des tableaux

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

php中世界最好的语言
php中世界最好的语言original
2018-03-12 11:27:068834parcourir

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>

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment nodejs utilise le module http pour écrire le client de test de l'interface d'image de téléchargementArticle suivant：Comment nodejs utilise le module http pour écrire le client de test de l'interface d'image de téléchargement

Articles Liés

Voir plus