原理是通过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-default/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>
原文地址：https://www.cnblogs.com/weijiutao/p/11313060.html
时间： 2024-11-05 23:26:43