本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2020-12(1)

2021-01(7)

2021-03(391)

2021-04(185)

2021-05(156)

新手小白记录elementUI tree组件对节点增删改

发布于2021-09-24 20:15     阅读(1055)     评论(0)     点赞(23)     收藏(3)


效果:

 对tree组件封装成treeComponent 组件,内容如下,从项目中选取

  1. <el-tree
  2. ref="tree"
  3. v-loading="loading"
  4. :data="treeData"
  5. v-bind="treeProps"
  6. @current-change="onCurrentChange"
  7. >
  8. <div slot-scope="{ node, data }" class="custom-tree-node">
  9. <span v-if="!data.showInput"> {{ node.label }}</span>
  10. <el-input
  11. v-else
  12. ref="inputVal"
  13. size="mini"
  14. :value="data.name.trim()"
  15. style="width:150px"
  16. :autofocus="true"
  17. @blur="onSaveNode( data)"
  18. @input="a => onInput(a, data)"
  19. />
  20. <div class="options">
  21. <el-button
  22. type="text"
  23. size="mini"
  24. icon="el-icon-edit"
  25. @click.stop="() => onEditNode(data)"
  26. />
  27. <el-button
  28. type="text"
  29. size="mini"
  30. icon="el-icon-plus"
  31. @click.stop="() => $emit('append-node', data)"
  32. />
  33. <confirm-button
  34. :button-props="buttonProps"
  35. :ok-button-props="okButtonProps"
  36. :content="`确认删除此节点吗?`"
  37. @ok="$emit('delete-node', data)"
  38. />
  39. </template>
  40. </div>
  41. </el-tree>
  42. <script>
  43. export default {
  44. data() {
  45. return {
  46. oldNodeName: '',
  47. treeData: [],
  48. }
  49. },
  50. computed: {
  51. treeProps() {
  52. return {
  53. props: {
  54. label: 'name'
  55. },
  56. 'node-key': 'id',
  57. 'default-expand-all': true,
  58. 'expand-on-click-node': false,
  59. 'highlight-current': true,
  60. ...this.$attrs
  61. }
  62. }
  63. },
  64. mounted() {
  65. // treeData 你的数据,结构类似
  66. // const treeData = [
  67. // {
  68. // id: 1,
  69. // name: '一级 1',
  70. // showInput: false, // 作用:是否显示input框
  71. // children: [
  72. // {
  73. // id: 4,
  74. // name: '二级 1-1',
  75. // showInput: false,
  76. // children: [
  77. // {
  78. // id: 9,
  79. // name: '三级 1-1-1',
  80. // showInput: false // 作用:是否显示input框
  81. // },
  82. // {
  83. // id: 10,
  84. // name: '三级 1-1-2',
  85. // showInput: false // 作用:是否显示input框
  86. // }
  87. // ]
  88. // }
  89. // ]
  90. this.treeData = treeData
  91. },
  92. // 点击修改节点
  93. onEditNode(data) {
  94. this.onChangeShowInput(data)
  95. this.oldNodeName = data.name.trim()
  96. this.$nextTick(() => {
  97. this.$refs.inputVal.focus()
  98. })
  99. },
  100. // input框编辑失去焦点
  101. onSaveNode(data) {
  102. if (this.oldNodeName !== data.name.trim()) {
  103. this.$emit('edit-node', data, (isOk) => {
  104. if (isOk) {
  105. this.onChangeShowInput(data)
  106. } else {
  107. this.$refs.inputVal.focus()
  108. }
  109. })
  110. } else {
  111. this.onChangeShowInput(data)
  112. }
  113. },
  114. onInput(value, data) {
  115. data.name = value
  116. },
  117. onChangeShowInput(data) {
  118. data.showInput = !data.showInput
  119. },
  120. onCurrentChange() {
  121. }
  122. }
  123. </script>

原文链接:https://blog.csdn.net/ismmc/article/details/120435946




所属网站分类: 技术文章 > 博客

作者:加油打工人

链接:http://www.qianduanheidong.com/blog/article/192828/3acb0916e5615637b800/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

23 0
收藏该文
已收藏

评论内容:(最多支持255个字符)