当前位置:   article > 正文

ElementUI实现可编辑表格_elementui可编辑表

elementui可编辑表

实现效果

  • 【可编辑单元格】双击某个单元格 该单元格变为input输入框 编辑修改目标单元格 ;并通过v-focus让input自动获取焦点
  • input输入框失去焦点时 input输入框隐藏 展示默认Table 
  1. <el-table :data="paramTable" border tooltip-effect="light" size="mini" @cell-dblclick="cellClick">
  2. <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
  3. <el-table-column prop="factorLevel" label="值" align="center" show-overflow-tooltip>
  4. <template slot-scope="scope">
  5. <el-input size="mini" v-model="scope.row.factorLevel" v-if="scope.row.flag" @blur="inputClick(scope.row)" v-focus></el-input>
  6. <span v-if="!scope.row.flag">{{scope.row.factorLevel}}</span>
  7. </template>
  8. </el-table-column>
  9. <el-table-column fixed="right" label="操作" align="center" width="90px">
  10. <template slot-scope="scope">
  11. <el-button size="mini" type="text" icon="el-icon-delete"></el-button>
  12. </template>
  13. </el-table-column>
  14. </el-table>
  15. <script>
  16. export default {
  17. data(){
  18. return{
  19. paramTable:[{
  20. factorLevel:1,
  21. flag:false
  22. },{
  23. factorLevel:2,
  24. flag:false
  25. },{
  26. factorLevel:3,
  27. flag:false
  28. }]
  29. }
  30. },
  31. directives: {
  32. // 注册一个局部的自定义指令 v-focus
  33. focus: {
  34. // 指令的定义
  35. inserted: function (el) {
  36. // 聚焦元素
  37. el.querySelector('input').focus()
  38. }
  39. }
  40. },
  41. methods: {
  42. //双击单元格后,显示input,并通过v-focus让input自动获取焦点
  43. cellClick(row){
  44. row.flag=true
  45. console.log(row)
  46. },
  47. //input框失去焦点事件
  48. inputClick(row){
  49. row.flag=false
  50. }
  51. }
  52. }
  53. </script>

 双击单元格后,显示input,并通过v-focus让input自动获取焦点

 input框失去焦点事件

 Element-UI可编辑表格的实现

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/201188
推荐阅读
相关标签