vxe-table在线表格的使用记录

vxe-table v3（在线编辑表格手动触发）

1.npm安装：（Vue2）

npm install xe-utils@3 vxe-table@3

2.全局引入

import Vue from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'Vue.use(VXETable)

3.开始使用：（下面图片的效果中我加了插入新一行、校验；以下所展示的代码并无）

设置 edit-config={trigger: 'manual', mode: 'row'} 启用行编辑的功能

edit-config为可编辑配置项。其中showIcon：false，取消展示表格每一列的图标；autoClear：false，当用户点击非编辑行列处，对此时所编辑行列无影响。（这一个非常重要，不懂可以自己修改并尝试）

<vxe-tableborderresizableshow-overflowref="xTable":loading="loading":data="tableData":edit-rules="validRules":edit-config="{ trigger: 'manual', mode: 'row',showIcon: false, autoClear: false }":row-config="{ isHover: true }"@edit-closed="updateData"><vxe-column type="seq" width="100"></vxe-column><vxe-columnwidth="100"field="fieldName"title="字段名称":edit-render="{}"><template #edit="{ row }"><vxe-input v-model="row.fieldName" type="text" @blur="getPinyin(row)"></vxe-input></template></vxe-column><vxe-column width="100" field="field_code" title="字段编码" :edit-render="{}"><template #edit="{ row }"><vxe-input v-model="row.field_code" type="text"></vxe-input></template></vxe-column><vxe-columnwidth="100"field="field_type"title="字段类型":edit-render="{}"><template #default="{ row }"><span>{{ formatType(row.field_type) }}</span></template><template #edit="{ row }"><vxe-select v-model="row.field_type" transfer><vxe-optionv-for="item in typeList":key="item.value":value="item.value":label="item.label"></vxe-option></vxe-select></template></vxe-column><vxe-columnwidth="100"field="field_length"title="字段长度":edit-render="{}"><template #edit="{ row }"><vxe-inputv-model="row.field_length"type="integer"placeholder="请输入字段长度"></vxe-input></template></vxe-column><vxe-columnwidth="100"field="fractional_length"title="小数位数":edit-render="{}"><template #edit="{ row }"><vxe-inputv-model="row.fractional_length"type="integer"placeholder="请输入小数位数"></vxe-input></template></vxe-column><vxe-columnwidth="140"field="required_sign"title="是否必填":edit-render="{}"><template #default="{ row }"><span>{{ mandatoryType(row.required_sign) }}</span></template><template #edit="{ row }"><vxe-radio-group v-model="row.required_sign"><vxe-radiov-for="item in mandatoryList":key="item.value":label="item.label":content="item.value"></vxe-radio></vxe-radio-group></template></vxe-column><vxe-columnwidth="140"field="app_sign"title="是否在APP显示":edit-render="{}"><template #default="{ row }"><span>{{ mandatoryAppType(row.app_sign) }}</span></template><template #edit="{ row }"><vxe-radio-group v-model="row.app_sign"><vxe-radiov-for="item in mandatory_appList":key="item.value":label="item.label":content="item.value"></vxe-radio></vxe-radio-group></template></vxe-column><vxe-columnwidth="140"field="remark"title="说明":edit-render="{}"><template #edit="{ row }"><vxe-input v-model="row.remark" type="text"></vxe-input></template></vxe-column><vxe-columnwidth="140"field="dict_id"title="关联的字典项":edit-render="{}"></vxe-column><vxe-column title="操作" width="200" fixed="right"><template #default="{ row }"><template v-if="$refs.xTable.isActiveByRow(row)"><vxe-button @click="saveRowEvent(row)">保存</vxe-button><vxe-button @click="removeRowEvent(row)">删除</vxe-button><vxe-button @click="cancelRowEvent(row)">取消</vxe-button></template><template v-else><vxe-button @click="editRowEvent(row)">编辑</vxe-button></template></template></vxe-column></vxe-table>

vxe-table在线表格的使用记录相关推荐

您有一个新的订单mp3在线_Airtable，不仅仅是强大的在线表格应用，而是一个新物种...
Airtable 是一个海外的在线表格应用,已经出现了好几年,火箭君一直在默默关注. 然而,这款应用并不是按照「剧本」朝着「在线Excel」或者「SpreadSheet」的方向演化,而是逐渐成为一个全 ...
antd table 时间搜索_antd table按表格里的日期去排序操作
表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...
Css制作table细线表格
制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...
sql表格模型获取记录内容_SQL Server和BI –如何使用Excel记录表格模型
sql表格模型获取记录内容介绍 (Introduction) A few weeks back I had been working on an interesting proof of conce ...
sql表格模型获取记录内容_SQL Server和BI –如何使用Reporting Services 2016记录表格模型
sql表格模型获取记录内容介绍 (Introduction) A few weeks back I had been working on an interesting proof of conce ...
5款优秀的在线表格生成工具
1.在线表格编辑器--TablesGenerator 表格制作工具TablesGenerator是一个在线制作 LaTeX.HTML.Markdown 格式的表格代码工具,支持在表格中填充数据,修改字 ...
测试分析报告（GB8567——88）基于协同的在线表格forture-sheet
测试分析报告(GB8567--88) 1引言 1.1编写目的测试分析报告是在测试分析的基础上,对测试的结果以及测试的数据等加以记录和分析总结.它也是测试过程中的一个重要环节,同时,它也是对软件性能的 ...
在线表格编辑插件handsontable使用
记录:handsontable,在线表格编辑插件地址:https://github.com/handsontable/handsontable 效果: 使用: <link rel=" ...
antd table 排序如何使用_antd table按表格里的日期去排序操作
表格内容根据票据日期升序(这里是已经排序后的效果) 上代码代码中data的内容如下根据paper_date排序,因为目前这种格式不支持比较,需要先转换成时间戳 new Date(aTimeStr ...

vxe-table在线表格的使用记录

vxe-table在线表格的使用记录相关推荐

最新文章

热门文章