VUE+Element UI實現簡單的表格行內編輯效果
阿新 • • 發佈：2018-11-08
<!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>
原理是通過Css控制繫結的輸入控制元件與顯示值,在選中行樣式下對控制元件進行隱藏或顯示