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

2024-10-02 13:36:26

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

效果图

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

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

vue+iview 实现可编辑表格的示例代码

先简单说明一下,这个Demo引入的vue,iview的方式是标签引入的,没有用到webpack之类的构建工具... 毕竟公司还在用angularjs+jq. 这也是我第一次写文章,大家看看思路就行了,要是有大佬指点指点就更好了话不多说,先来个效果图我们再看下极为简单的目录结构 IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关
VUE+Element UI实现简单的表格行内编辑效果的示例的代码

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示效果示例地址 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.c
Vue.js实现可编辑的表格

本文实例为大家分享了Vue.js实现可编辑的表格的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="bootstrap.min.css" rel="external nofollow" >
vue+Element中table表格实现可编辑（select下拉框）

最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当
VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

一.问题用elementUi横着增加一行数据没毛病,可以操作添加一列,这新增的这一列, 第一次去赋值的时候值是改了, 但没生效点击下一行时值就变过来二.原因横向添加是复制上面的某一条数据来的,因为data里面有这些属性的定义,所以横向添加没问题而纵向添加的数据,因为没有事先在 el-select v-modle="" 里面定义好字段,定义好的option是通过v-for出来的(option是写死的就不会有这个问题),就会出现选择后,select元素上无法展示,但是其实数
Vue+Element实现表格编辑、删除、以及新增行的最优方法

之前已经实现了表格的新增.编辑和删除,在我的上篇文章中写的也比较详细.但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入.从代码上来说,代码量也较大:而且使用的是原生的html标签,有点尴尬. 于是,进一步研以后,进行了一定的优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性.下面直接上代码: 1 html部分这次的优化其实主要在于html部分,直接将vue的el-input标签或者el-select标签放入表格的每个单元格中.这样就不用
vue+element-ui实现表格编辑的三种实现方式

1.表格内部显示和编辑切换这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&
vue中可编辑树状表格的实现代码

vue中可编辑树状表格的代码如下所示: html代码 <template> <el-table :data="datatree" row-key="id" :tree-props="{children: 'children'}" > <el-table-column label="姓名" border> <template slot-scope="scope">
vue实现树状表格效果

本文实例为大家分享了vue实现树状表格的具体代码,供大家参考,具体内容如下 1. 初始化配置安装模块: npm i vue-table-with-tree-grid -S main.js 文件 import ZkTable from 'vue-table-with-tree-grid' Vue.component(ZkTable.name, ZkTable); 2. 使用 <template lang="html"> <div id="example&qu
vue实现一个懒加载的树状表格实例

目录一个懒加载的树状表格实例安装模板 js代码使用el-table懒加载树形表格时的注意点 1.版本问题 2.数据显示 3.滚动条 4.数据结构 5.el-table的fixed导致的问题一个懒加载的树状表格实例实现一个树状表格,需要用到vxe-table这个库,虽然element-ui也能实现,但这个库是专门针对表格做了更多的拓展,功能更多一些. 接下来,说一下使用方式. 安装 npm install xe-utils vxe-table // 入口文件引入,一般是main.js
jquery插件treegrid树状表格的使用方法详解（.Net平台）

上一篇介绍了DataTable,这一篇在DT的基础之上再使用jquery的一款插件:treegrid,官网地址:http://maxazan.github.io/jquery-treegrid/ 一.使用treegrid,需要以下支持 jquery.min.js+jquery.treegrid.min.js 二.后端提供树状列表格式的集合数据,借助前端的DT的配置控制,来在页面上输出满足treegrid格式要求的html 前台: @using Model @{ Layout = null; Us
关于在vue 中使用百度ueEditor编辑器的方法实例代码

1. 安装 npm i vue-ueditor --save-dev 2.从nodemodels 取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的 21行代码更改路径 var URL = '/static/ueditor1_4_3_3/' || getUEBasePath(); (1) serverUrl: URL + 'php/controller.php', 这里是你配置的上传内容的
vue中使用echarts制作圆环图的实例代码

vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD
vue中el-upload上传图片到七牛的示例代码

一.思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload. 二.代码. <el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input> <el-col :span="10" class="mt10"> <el-upload class="upload
vue中keep-alive内置组件缓存的实例代码

需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期
Vue中组件之间数据的传递的示例代码

Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: <div id="app"> <my-compo c="886"></my-compo> </div> 子组件中,用props声明这个值即可.并且在template里面可以直接使用{{c}}来获得这个属性,而不需要写为{{this
Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus">  <swiper :options="swiperOption"

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

相关推荐

随机推荐