vue中可编辑树状表格的实现代码

 更新时间:2020年10月31日 14:52:17   作者:等樱花的龙猫  
这篇文章主要介绍了vue中可编辑树状表格的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

vue中可编辑树状表格的代码如下所示:

html代码

 <template>
	<el-table
    :data="datatree"
    row-key="id"
    :tree-props="{children: 'children'}"
   >
    <el-table-column label="姓名" border>
        <template slot-scope="scope">
          <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.label"></el-input>
          <span v-show="!scope.row.show">{{scope.row.label}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="scope.row.show =true" >编辑</el-button>
          <el-button @click="scope.row.show =false">保存</el-button>
        </template>
      </el-table-column>
   </el-table>
 </template>

js代码

<script>
export default {
	data(){
  	return {
  	datatree: [{
     id: 1,
     label: '水果',
     show:false,
     children: [{
      id: 4,
      label: '苹果',
      show:false,
      children: [{
       id: 9,
       label: '苹果皮',
       show:false
      }, {
       id: 10,
       label: '苹果仔',
       show:false
      }]
     }]
    }, {
     id: 2,
     label: '蔬菜',
     show:false,
     children: [{
      id: 5,
      label: '青菜',
      show:false
     }, {
      id: 6,
      label: '土豆',
      show:false
     }]
    }, {
     id: 3,
     label: '饮料',
     show:false,
     children: [{
      id: 7,
      label: '冰红茶',
      show:false
     }, {
      id: 8,
      label: '酷儿',
      show:false
     }]
    }],
    defaultProps: {
     children: 'children',
     label: 'label',
     show:'show'
    }
  }
 }
}

效果图

在这里插入图片描述

一个简单的可编辑树状表格就出现了
嫌input框太大自己设置一下

在这里插入图片描述
在这里插入图片描述

到此这篇关于vue中可编辑树状表格的实现代码的文章就介绍到这了,更多相关vue树状表格内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • vue使用数组splice方法失效,且总删除最后一项的问题及解决

    vue使用数组splice方法失效,且总删除最后一项的问题及解决

    这篇文章主要介绍了vue使用数组splice方法失效,且总删除最后一项的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue中的change事件无效问题及解决

    Vue中的change事件无效问题及解决

    这篇文章主要介绍了Vue中的change事件无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 如何让别人访问本地运行的vue项目

    如何让别人访问本地运行的vue项目

    这篇文章主要介绍了如何让别人访问本地运行的vue项目,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 详解Vue改变数组中对象的属性不重新渲染View的解决方案

    详解Vue改变数组中对象的属性不重新渲染View的解决方案

    这篇文章主要介绍了详解Vue改变数组中对象的属性不重新渲染View的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue实现滑动和滚动效果

    vue实现滑动和滚动效果

    这篇文章主要为大家详细介绍了vue实现滑动和滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue 移动端注入骨架屏的配置方法

    vue 移动端注入骨架屏的配置方法

    骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
    2019-06-06
  • 基于vue2.0实现简单轮播图

    基于vue2.0实现简单轮播图

    这篇文章主要为大家详细介绍了基于vue2.0实现简单轮播图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue服务端渲染添加缓存的方法

    vue服务端渲染添加缓存的方法

    vue服务区缓存分为页面缓存、组建缓存和接口缓存,本文通过实例代码逐一给大家介绍,本文重点给大家介绍vue服务端渲染添加缓存的方法,感兴趣的朋友跟随小编一起看看吧
    2018-09-09
  • 使用Vuex实现一个笔记应用的方法

    使用Vuex实现一个笔记应用的方法

    这篇文章主要介绍了使用Vuex实现一个笔记应用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Element中table组件(el-table)右侧滚动条空白占位处理

    Element中table组件(el-table)右侧滚动条空白占位处理

    当我设置了max-height,就会在表格右侧出现一列空白的占位,本文主要介绍了Element中table组件(el-table)右侧滚动条空白占位处理,感兴趣的可以了解一下
    2023-09-09

最新评论

?


http://www.vxiaotou.com