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继承的实现
Oct 24 Javascript
原生javascript实现图片轮播效果代码
Sep 03 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
Python实现比较两个列表(list)范围
2015/06/12 Python
利用Python破解斗地主残局详解
2017/06/30 Python
python set内置函数的具体使用
2019/07/02 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
运动会广播稿300字
2014/01/10 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
开工仪式策划方案
2014/05/23 职场文书
创先争优演讲稿
2014/09/15 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
大学迎新生标语
2014/10/06 职场文书
2014年外联部工作总结
2014/11/17 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS