推荐一个好用的行内可编辑的table组件 vxe-table
项目中有一个需要用户点击table单元格可编辑的需求,由于博主用的是elementUI,element组件内实现可编辑,用过的小伙伴都知道,非常麻烦,后来博主在浏览组件的时候发现了 一款非常好用的table组件 vxe-table。
用起来非常简单只需要跟element一样指定表头数据就可以
<vxe-table
border
show-overflow
ref="xTable"
:data="tableData"
:edit-config="{trigger: 'click', mode: 'cell', showStatus: true}">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="index" width="60"></vxe-table-column>
<vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-table-column>
<vxe-table-column field="date3" title="Date" formatter="toDateString"></vxe-table-column>
<vxe-table-column title="操作" width="200">
<template v-slot="{ row, rowIndex }">
<template v-if="!row.date3">
<vxe-button @click="saveEvent2(row)" :loading="row.loading">更新并替换新数据</vxe-button>
</template>
<template v-else-if="rowIndex % 2 === 0">
<vxe-button @click="saveEvent(row)" :loading="row.loading">更新行数据</vxe-button>
</template>
<template v-else>
<vxe-button type="primary" @click="saveEvent(row, 'name')" :loading="row.loading">更新 Name 列</vxe-button>
</template>
</template>
</vxe-table-column>
</vxe-table>
editActivedEvent ({ row, column }, event) {
console.log(`打开 ${column.title} 列编辑`)
},
editClosedEvent ({ row, column }, event) {
console.log(`关闭 ${column.title} 列编辑`)
}
这样一个可编辑table就直接实现了
api:https://xuliangzhan_admin.gitee.io/vxe-table/#/table/edit/click
推荐一个好用的行内可编辑的table组件 vxe-table的更多相关文章
- 推荐一个 MYSQL 的命令行的客户端 MYCLI
MYCLI 是一个 MySQL 命令行客户端工具 , 可以实现自动补全(auto-completion)和语法高亮,平时测试环境维护一些数据还是蛮方便的. https://github.com/dbc ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- element 表格行内进行编辑
<template> <div class="process_manage"> <el-card class="box-card" ...
- Oracle行内链接不会引起USER_TABLES中CHAIN_CNT值变化
前几天和群里网友讨论一个关于行内链接(intra-block chaining)的问题,问题非常有意思,恰好今天有空,顺便整理了一下这些知识点. 问题描述:下面SQL,创建一个超过255列的表(实际为 ...
- easyui学习笔记3—在展开行内的增删改操作
这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" hre ...
- ASP.NET Aries 高级开发教程:行内编辑事件怎么新增数据到后台(番外篇)
前提: 今天又网友又提出了一个问题,说行内编辑保存之前,怎么新增一些数据提交到后台? 对方说看了源码,也没找到怎么处理,这里就写文给解答一下. 解答: 于是我看了一眼源码,只能说你没找到地方: 第12 ...
- 行内元素与块级元素的区别,行内块级元素在IE8-的兼容性
行内元素与块级元素的区别 行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素 行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行 ...
- pyqt 8行内就可以跑一个浏览器
pyqt 8行内就可以跑一个浏览器 from PyQt4.QtCore import * from PyQt4.QtGui import * from PyQt4.QtWebKit import * ...
- AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
随机推荐
- luogu P2899 [USACO08JAN]手机网络Cell Phone Network |贪心
include include include include include include define db double using namespace std; const int N=1e ...
- react-native StatusBar透明
目录 一 react-native 自定义AppStatusBar 二 配置 android 一 react-native 自定义AppStatusBar 透明 StatusBar字体黑色, 否则是白 ...
- Docker系列-(1) 原理与基本操作
Docker是一个开源的应用容器引擎,基于Go语言,并遵从Apache2.0协议开源. Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的Linux机器 ...
- Day 09 作业
简述定义函数的三种方式 有参函数, 无参函数, 空函数 简述函数的返回值 函数内部代码经过一系列的逻辑处理返回的结果 简述函数的参数 函数的参数分形参和实参 形参: 定义函数阶段, 括号内定义的参数, ...
- hdu 1054 Strategic Game (简单树形DP)
Strategic Game Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- ACM-ICPC 2018 南京赛区网络预赛 L. Magical Girl Haze (分层dijkstra)
There are NN cities in the country, and MMdirectional roads from uu to v(1\le u, v\le n)v(1≤u,v≤n). ...
- Docker network整理
一.简介 默认情况下容器与容器.容器与宿主机的网络是隔离开来的, 当你安装docker的时候,docker会创建一个桥接器docker0,通过它才让容器与容器.容器与宿主机之间通信. Docker安装 ...
- 重新精读《Java 编程思想》系列之类的访问权限
Java 中,我们用访问权限修饰词确定库中的哪些类对于使用者是可以使用的. 访问权限修饰词有 public,protected,private 和什么都不写. 那么对于类来说,我们只可以用 publi ...
- 【后端C#】后台通过http post 调用 webservice 的方法
定义http post 调用webservice的某个方法 /// <summary> /// http Post调用 WebService /// </summary> pu ...
- idea创建Maven版的ssm项目
要使用idea创建一个maven项目,首先电脑安装maven,maven下载地址:http://maven.apache.org/download.cgi 1.打开idea,选择创建一个新项目,选择m ...