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 和 Java 的区别浅析
Jul 31 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
javascript的正则匹配方法学习
Feb 24 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
jquery实现数字输入框
Feb 22 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue element动态渲染、移除表单并添加验证的实现
Jan 16 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
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
小程序实现留言板
2018/11/02 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
python算法题 链表反转详解
2019/07/02 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
深入分析python 排序
2020/08/24 Python
python开发一款翻译工具
2020/10/10 Python
自我鉴定范文300字
2013/10/01 职场文书
仓库主管的岗位职责
2013/12/04 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
搞笑婚前保证书
2015/02/28 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
nginx常用配置conf的示例代码详解
2022/03/21 Servers