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 面向对象特性
Dec 28 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 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 调用远程url的六种方法小结
2009/11/02 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php实现记事本案例
2020/10/20 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js触发select onchange事件的小技巧
2014/08/05 Javascript
js读取cookie方法总结
2014/10/31 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
javascript实现抢购倒计时程序
2019/08/26 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
Python计算字符宽度的方法
2016/06/14 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
Django日志及中间件模块应用案例
2020/09/10 Python
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
为什么需要版本控制
2016/10/28 面试题
如何定义一个可复用的服务
2014/09/30 面试题
幼儿园母亲节活动方案
2014/03/10 职场文书
医药销售自荐书
2014/05/29 职场文书
教师党员自我评价范文
2015/03/04 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
用Python实现Newton插值法
2021/04/17 Python
在CSS中使用when/else的方法
2022/01/18 HTML / CSS
基于Python实现一个春节倒计时脚本
2022/01/22 Python