建站ABC小程序_VUE+Element UI完成简略的表格行内修

VUE+Element UI实现简单的表格行内编辑效果的示例的代码       这篇文章主要介绍了VUE+Element UI实现简单的表格行内编辑效果的示例的代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

 !DOCTYPE html 
 html 
 head 
 meta charset="UTF-8" 
 !-- 引入样式 -- 
 link rel="stylesheet" href="element-ui/lib/theme-default/index.css" rel="external nofollow" 
 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" 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="vue/dist/vue.js" /script 
 script src="element-ui/lib/index.js" /script 
 script 
 var app = new Vue({
 el: '#app',
 data: {
 tableData: [{
 date: '',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1518 弄'
 }, {
 date: '',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1517 弄'
 }, {
 date: '',
 name: '王小虎',
 address: '上海市普陀区金沙江路 1519 弄'
 }, {
 date: '',
 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 

根据原理自定义效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。