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 相关文章推荐
js计数器代码
Nov 04 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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
用PHP和MySQL保存和输出图片
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
PHP函数实现从一个文本字符串中提取关键字的方法
2015/07/01 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
Python实现二叉堆
2016/02/03 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
python为什么要安装到c盘
2020/07/20 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python全栈开发语法总结
2020/11/22 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
乌克兰数字设备、配件和智能技术的连锁商店:KTC
2020/08/18 全球购物
策划主管的工作职责
2013/11/24 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
晚会邀请函范文
2014/01/24 职场文书
美德好少年主要事迹
2014/01/29 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript