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

 更新时间:2020年10月31日 14:52:17   作者:等樱花的龙猫  
这篇文章主要介绍了vue中可编辑树状表格的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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实现图片懒加载的方法分析

    vue实现图片懒加载的方法分析

    这篇文章主要介绍了vue实现图片懒加载的方法,结合实例形式分析了vue.js图片懒加载插件安装、使用方法与相关操作注意事项,需要的朋友可以参考下
    2020-02-02
  • 详解如何写出一个利于扩展的vue路由配置

    详解如何写出一个利于扩展的vue路由配置

    这篇文章主要介绍了详解如何写出一个利于扩展的vue路由配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vuejs如何配置less

    vuejs如何配置less

    本篇文章主要介绍了vuejs如何配置less,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • iview table高度动态设置方法

    iview table高度动态设置方法

    下面小编就为大家分享一篇iview table高度动态设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vuex实现数据增加和删除功能

    Vuex实现数据增加和删除功能

    今天小编就为大家分享一篇Vuex实现数据增加和删除功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 对vue.js中this.$emit的深入理解

    对vue.js中this.$emit的深入理解

    下面小编就为大家分享一篇对vue.js中this.$emit的深入理解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue短信验证性能优化如何写入localstorage中

    vue短信验证性能优化如何写入localstorage中

    这篇文章主要介绍了vue短信验证性能优化写入localstorage中的方法,解决这个问题需要把时间都写到localstorage里面去,具体解决方法大家参考下本文
    2018-04-04
  • Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue组件开发之LeanCloud带图形校验码的短信发送功能

    Vue是目前使用较广泛的三大前端框架之一,其数据驱动及组件化的特性使得前端开发更为快捷便利。本文在LeanCloud 短信轰炸与图形校验码官方文档 基础上,从封装需要出发开发一个简单的短信图形验证Vue组件,具体内容详情大家参考下本文
    2017-11-11
  • Vue Socket.io源码解读

    Vue Socket.io源码解读

    这篇文章主要介绍了Vue Socket.io源码解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 把vue-router和express项目部署到服务器的方法

    把vue-router和express项目部署到服务器的方法

    下面小编就为大家分享一篇把vue-router和express项目部署到服务器的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论