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


Posted in Javascript onOctober 31, 2020

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'
    }
  }
 }
}

效果图

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

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

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

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

Javascript 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jQuery文字轮播特效
Feb 12 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
解析vue、angular深度作用选择器
Sep 11 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
node.js如何操作MySQL数据库
Oct 29 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
react ant Design手动设置表单的值操作
Oct 31 #Javascript
解决pycharm双击但是无法打开的情况
Oct 31 #Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 #Javascript
antd design table更改某行数据的样式操作
Oct 31 #Javascript
antd配置config-overrides.js文件的操作
Oct 31 #Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
解析php中array_merge与array+array的区别
2013/06/21 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
php 问卷调查结果统计
2015/10/08 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
接收键盘指令的脚本
2006/06/26 Javascript
srcElement表格样式
2006/09/03 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python面向对象特殊成员
2017/04/24 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
工会趣味活动方案
2014/08/18 职场文书
门面房租房协议书
2014/08/20 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
学校师德师风整改方案
2014/10/28 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
鲁冰花观后感
2015/06/10 职场文书
分享几种python 变量合并方法
2022/03/20 Python