vxe-table 如何实现全表都可以编辑,所有列可编辑

news/2024/10/22 10:35:42/

vxe-table 如何实现全表都可以编辑,所有列可编辑

自定义实现,无法使用内置的CRUD管理

<vxe-table bordershow-overflowref="xTable"height="500":data="tableData":edit-config="{trigger: 'click', mode: 'row'}"><vxe-column fixed="left" field="name" title="Name" width="100"><template #default="{ row }"><input v-model="row.name" type="text"></template></vxe-column><vxe-column field="name1" title="Name1" width="100"><template #default="{ row }"><input v-model="row.name1" type="text"></template></vxe-column><vxe-column field="name2" title="Name2" width="140"><template #default="{ row }"><input v-model="row.name2" type="text"></template></vxe-column><vxe-column field="name3" title="Name3" width="140"><template #default="{ row }"><input v-model="row.name3" type="text"></template></vxe-column><vxe-column field="name4" title="Name4" width="140"><template #default="{ row }"><input v-model="row.name4" type="text"></template></vxe-column><vxe-column field="name5" title="Name5" width="140"><template #default="{ row }"><input v-model="row.name5" type="text"></template></vxe-column><vxe-column field="name6" title="Name6" width="140"><template #default="{ row }"><input v-model="row.name6" type="text"></template></vxe-column><vxe-column field="name7" title="Name7" width="140"><template #default="{ row }"><input v-model="row.name7" type="text"></template></vxe-column><vxe-column field="name8" title="Name8" width="140"><template #default="{ row }"><input v-model="row.name8" type="text"></template></vxe-column><vxe-column field="sex" title="Sex" width="140"><template #default="{ row }"><input v-model="row.sex" type="text"></template></vxe-column><vxe-column field="date" title="Date" width="140"><template #default="{ row }"><input v-model="row.date" type="text"></template></vxe-column><vxe-column field="address" title="Address" width="140" fixed="right"><template #default="{ row }"><input v-model="row.address" type="text"></template></vxe-column>
</vxe-table>
export default {data () {return {tableData: []}},mounted () {var list = []for(var index = 0; index < 5000; index++){list.push({id: index + 10000,name: 'test' + index,name1:'1',name2:'2',name3:'3',name4:'4',name5:'5',name6:'6',name7:'7',name8:'8',name9:'9',name10:'10',name11:'11',name12:'12',name13:'13',name14:'14',role: 'developer',sex: 'Man',date: '2019-05-01',time: 1556677810888 + index * 500,region: 'ShenZhen',address: 'address abc' + index})}this.tableData = list}
}

在这里插入图片描述


http://www.ppmy.cn/news/429784.html

相关文章

实时编辑表格,可以编辑的表格

本站已经有《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》这个案例是一个非常完整的案例&#xff0c;带数据库更新部分 本例没有更新数据库的部分&#xff0c;但是有传递的过程 演示 PHP Code <table id"editTable"> <the…

easyExcel工具

注解格式 通过注解定义格式是 EasyExcel 封装的高级功能&#xff0c;可以让我们很方便的定义格式。 格式化内容 先定义一个使用注解格式化内容的实体类&#xff1a; Data public class FormatContentItem { ExcelProperty(value "字符串标题", converter Ti…

EasyExcel合并表头,控制文字大小及样式处理

引入jar <!--引入 阿里的 easyexcel 如果报错 需要引入 asm jar--> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>2.2.6</ve…

table可编辑表格写法(简单)

1、添加JS $(".table").find(".dbclicktd").bind("dblclick", function () {var input "<input typetext idtemp stylewidth:130px; value" $(this).text() " >";$(this).text("");$(this).append(inpu…

EasyExcel复杂表头的生成方法

一.简介 本篇使用阿里EasyExcel框架&#xff0c;官方文档&#xff1a; https://github.com/alibaba/easyexcel <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.6</version></depen…

easyx文字输出汇总

文章目录 前言一、outtextxy()输出文字字符要修改字符集 二、文字特效1.setbkmode设置文字背景2.settextcolor();设置文字颜色用RGB三原色设置用颜色常量3.settextstyle()设置文字样式大小 总结标题最后附上文字动态变色渐变放大输出的代码&#xff1a; 前言 在前面的一系列文…

excel制表基础:规范的制表理念和思路让效率提升 下篇

在日常工作中我们会构建很多的表格&#xff0c;其实这些表格无论多少&#xff0c;都可以归结为三大类&#xff0c;分别为“源数据表”、“关系信息表”和“统计分析表”。上次我们提到了一套表格“统计的核心”——“源数据表”&#xff0c;今天继续为大家分享“关系信息表”和…

动态表格功能

这里写目录标题 需求实现原理代码效果展示 需求 表格由专业班级学号1-10号同学的信息组成&#xff0c;包括:学号、姓名、性别、二级学院、班级、专业、辅导员: 表格的奇数行字体为黑色&#xff0c; 底色为白色&#xff1b;偶数行字体为白色&#xff0c; 底色为黑色: 表格的每…