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

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

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <!-- 引入样式 -->
 7     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
 8     <style>
 9         * {
10     margin: 0;
11     padding: 0
12 }
13 body {
14     font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
15     overflow: auto;
16     font-weight: 400;
17     -webkit-font-smoothing: antialiased;
18 }
19 .tb-edit .el-input {
20     display: none
21 }
22 .tb-edit .current-row .el-input {
23     display: block
24 }
25 .tb-edit .current-row .el-input+span {
26     display: none
27 }
28     </style>
29 </head>
30 
31 <body>
32     <div id="app">
33         <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
34             <el-table-column label="日期" width="180">
35                 <template scope="scope">
36                     <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
37                 </template>
38             </el-table-column>
39             <el-table-column label="姓名" width="180">
40                 <template scope="scope">
41                     <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
42                 </template>
43             </el-table-column>
44             <el-table-column prop="address" label="地址">
45                 <template scope="scope">
46                     <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
47                 </template>
48             </el-table-column>
49             <el-table-column label="操作">
50                 <template scope="scope">
51                     <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
52                     <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
53                 </template>
54             </el-table-column>
55         </el-table>
56         <br>数据:{{tableData}}</div>
57 </body>
58 <script src="https://unpkg.com/vue/dist/vue.js"></script>
59 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
60 <script>
61     var app = new Vue({
62         el: '#app',
63         data: {
64             tableData: [{
65                 date: '2016-05-02',
66                 name: '王小虎',
67                 address: '上海市普陀区金沙江路 1518 弄'
68             }, {
69                 date: '2016-05-04',
70                 name: '王小虎',
71                 address: '上海市普陀区金沙江路 1517 弄'
72             }, {
73                 date: '2016-05-01',
74                 name: '王小虎',
75                 address: '上海市普陀区金沙江路 1519 弄'
76             }, {
77                 date: '2016-05-03',
78                 name: '王小虎',
79                 address: '上海市普陀区金沙江路 1516 弄'
80             }]
81         },
82         methods: {
83             handleCurrentChange(row, event, column) {
84                 console.log(row, event, column, event.currentTarget)
85             },
86             handleEdit(index, row) {
87                 console.log(index, row);
88             },
89             handleDelete(index, row) {
90                 console.log(index, row);
91             }
92         }
93     })
94 </script> 
95 </html>

 

posted @ 2019-08-07 08:55  丰寸  阅读(17680)  评论(7)  编辑  收藏  举报