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中世界最好的语言original
- 2018-03-12 11:27:068764parcourir
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.
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: '#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>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!