当前位置:Gxlcms > JavaScript > VUE+Element UI实现简单的表格行内编辑效果的示例的代码

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

时间:2021-07-01 10:21:17 帮助过:37人阅读

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

效果示例地址

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

根据原理自定义效果

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

人气教程排行