11 2024 档案
摘要:vxe-table 可编辑表格使用下拉树 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { const regionEd
阅读全文
摘要:vxe-table 树结构单元格选取与复制粘贴,通过 tree-config.transform 使用树形表格 <template> <div> <vxe-table border show-overflow keep-source height="600" :column-config="colu
阅读全文
摘要:vxe-table 树形表格的使用,支持多种数据结构,可以是带有父子结构的数组,也可以带有层级结构的嵌套数据。 官网:https://vxetable.cn Gitee 带有父子结构的平级数据 只需要带有父子结构的平级数据,例如:id 和 parentId,字段名可以任意设置。对于保存到数据库的平级
阅读全文
摘要:在使用 vxe-from 表单时,可能由于绑定项非常多,这个时候可能就需要将表单进行分类分组,可以泰国片页签的当时进行拆分组。 <template> <div> <vxe-tabs v-model="activeTab" height="200"> <vxe-tab-pane title="页签1"
阅读全文
摘要:当需要再表格中的某个字段是关联另外一张表示,需要将从另外表选择数据,并将数据保存在当前行中 官网:https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions"> <template #action="{ row }"> <vx
阅读全文
摘要:在公司开发大型项目中,使用主流表格库 vxe-table v3 和 iview, view-design 组件库,可以在可编辑单元格中渲染非常简单的使用更多的组件 官网:https://vxetable.cn 安装 npm install vxe-pc-ui@3.3.9 vxe-table@3.11
阅读全文
摘要:在公司开发大型项目中,使用主流表格库 vxe-table v3 和 ant-design-vue 组件库,可以在可编辑单元格中渲染非常简单的使用更多的组件 官网:https://vxetable.cn 安装 npm install vxe-pc-ui@3.3.9 vxe-table@3.11.10
阅读全文
摘要:在公司开发大型项目中,使用主流表格库 vxe-table v3 和 element-ui 组件库,可以在可编辑单元格中渲染非常简单的使用更多的组件 官网:https://vxetable.cn 安装 npm install vxe-pc-ui@3.3.9 vxe-table@3.11.10 @vxe
阅读全文
摘要:在 vxe-table 启用列多选功能,通过参数 column.type = 'checkbox' 设置类型为多选类型就可以了。 官网:https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </
阅读全文
摘要:在 vxe-table 启用列单选功能,通过参数 column.type = 'radio' 设置类型为单选类型就可以了。 官网:https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div
阅读全文
摘要:在 vxe-table 使用排序功能非常简单,给列加上 columns.sortable 属性就可以启用列的排序功能,当然这是本地排序,就是对当前已加载过当前页的数据进行排序。对于查询列表列表,项目中使用最多的是服务端排序,因为大部分都涉及分页。 前端排序 这样就可以启用前端数据排序,仅限于当前页
阅读全文
摘要:实现表格数据分组,按指定字段数据分组,使用树结构来实现分组功能。 官网:https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> import
阅读全文
摘要:正常情况下如果需要使用文本超出隐藏,通过 css 就可以完成 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 但是如果需要实现多行文本溢出,就很难实现里,谷歌浏览器虽然支持 css 多行溢出,大部分浏览器又不支持,所以作
阅读全文
摘要:在使用 vxe-grid 时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change 事件,从而实现实时更新合计功能。 官网:https://vxetable.cn 可以使用插槽模板,也可以使用配置式,下面是配置式的用法: <templ
阅读全文
摘要:vxe-modal 实现窗口拖拽调整宽高 官网:https://vxeui.com <template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="show
阅读全文
摘要:vxe-modal 实现窗口最大化与最小化 官网:https://vxeui.com <template> <div> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </div> </template> <script> im
阅读全文
摘要:官网:https://vxeui.com <template> <div> <p> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </p> </div> </template> <script> import { VxeUI
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="showPopup" :width="600" :
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions"></vxe-form> </div> </template> <script> export default { data () { const sexItemR
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent"> </vxe-form> </div> </template> <script> import { VxeUI } f
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions"></vxe-form> </div> </template> <script> export default { data () { const formOpti
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script
阅读全文
摘要:vxe-table 是一个全功能 vue 表格库,非常强大的功能基本可以满足对表格对表格的一切需求。不管是普通列表,大数据列表。可编辑表格,数据校验、Excel 单元格选择、复制粘贴等。。。 官网:https://vxetable.cn gitee 安装 npm install vxe-pc-ui@
阅读全文
摘要:vxe-table 内置非常强大 H5 打印,只需要传入 html 代码和 css 样式,就可以实现任何复杂的打印 官网:https://vxeui.com <template> <div> <vxe-button @click="printEvent">点击打印</vxe-button> <div
阅读全文
摘要:官网:https://vxetable.cn/ 以前老版本不支持虚拟滚动动态行高,vxe-table 新版本发布后,已经可以支持虚拟滚动和动态行高了。如果需要同等行高,只需加上 show-overflow 就可以了,同等行高的渲染性能是最优的,动态行高支持的最大数量低非常多。 建议非必要的场景应该使
阅读全文
摘要:多区域选取通过 mouse-config。area 与 area-config.multiple 启用,area-config.selectCellByHeader 用于启用表头选取功能,开启后选取表头自定义选取一整列的所有单元格 <template> <div> <vxe-table border
阅读全文
摘要:通过参数 mouse-config.area 启用单元格选取功能、Excel 区域选取。 <template> <div> <vxe-table border height="500" :column-config="{resizable: true}" :mouse-config="{area:
阅读全文
摘要:官网:https://vxeui.com/ <template> <div> <vxe-table border header-align="center" align="left" :data="tableData"> <vxe-column type="seq" width="70"></vxe
阅读全文
摘要:官网:https://vxeui.com/ <template> <div> <vxe-upload v-model="fileList" multiple show-progress :upload-method="uploadMethod"></vxe-upload> </div> </temp
阅读全文
摘要:官网:https://vxeui.com/ <template> <div> <vxe-upload v-model="imgList" mode="image" multiple show-progress :upload-method="uploadMethod"></vxe-upload> <
阅读全文
摘要:官网:https://vxeui.com <template> <div> <vxe-table-select v-model="val1" :columns="columnList" :options="tableData" :grid-config="gridConfig"></vxe-tabl
阅读全文
摘要:官网:https://vxeui.com 正常使用下拉框加载上万列表选项非常卡,使用虚拟滚的的下拉框之后就可以毫秒加载 50万行下拉选项 <template> <div> <p> <vxe-button @click="loadData(100)">加载1百条</vxe-button> <vxe-b
阅读全文
摘要:官网: https://vxetable.cn <template> <div> <vxe-button status="success" @click="resultEvent">获取列</vxe-button> <vxe-table border ref="tableRef" :column-c
阅读全文
摘要:官网: https://vxetable.cn <template> <div> <vxe-table border ref="tableRef" :row-config="rowConfig" :column-config="columnConfig" :data="tableData"> <vx
阅读全文
摘要:在 vxe-table 中使用 vxe-grid 渲染表格,当配置式不能满足需求时,。需要使用自定义插槽模板来自定义业务需求,实现更灵活的功能。vxe-grid 支持多种自定义方式,可以使用插槽模板,也可以使用插槽来自定义模板。 官网: https://vxetable.cn 自定义单元格模板 <t
阅读全文
摘要:官网: https://vxetable.cn 通过 range 启用范围选中,启用后鼠标按住复选框的列,向上或向下滑动选取,支持快捷键; MouseLeft 按住复选框的列,向上或向下滑动选取; MouseLeft + Ctrl 局部选取/取消; <template> <div> <vxe-tab
阅读全文
摘要:官网: https://vxetable.cn 导出 XML 文件 打开 xml 文件,部分截图 <template> <div> <vxe-button @click="exportEvent">直接导出 XML 文件</vxe-button> <vxe-table show-footer ref
阅读全文
摘要:官网: https://vxetable.cn 导出 Txt 文件 打卡 txt 文件 <template> <div> <vxe-button @click="exportEvent">直接导出 Txt 文件</vxe-button> <vxe-table show-footer ref="tab
阅读全文
摘要:官网: https://vxetable.cn 导出 HTML 文件 打开 html 文件 <template> <div> <vxe-button @click="exportEvent">直接导出 HTML 文件</vxe-button> <vxe-table show-footer ref="
阅读全文
摘要:导出时单元格类型默认是自动转换的,如果是需要字符串类型,可以通过 column.cell-type 设置 <template> <div> <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button> <vxe-table show-footer
阅读全文
摘要:官网: https://vxetable.cn 轻量级图表,超高性能的在表格中渲染柱状图,即使是渲染上万条数据单元格图表,也是丝滑流畅。 npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-render-chart@4.0.1 //
阅读全文
摘要:在 vxe-table 中,使用 echarts 实现表格通过右键菜单渲染折线图、饼图、柱状图等,通过扩展插件就能实现简单的配置渲染单元格图表 官网: https://vxetable.cn <template> <div> <vxe-grid v-bind="gridOptions" @menu-
阅读全文
摘要:官网: https://vxetable.cn 通过手动调用 exportData 方法可以直接导出文件 npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-export-pdf@4.0.8 jspdf@2.5.2 <script t
阅读全文
摘要:通过手动调用 exportData 方法可以直接导出文件,导出时单元格类型默认是自动转换的,如果是需要字符串类型,可以通过 column.cell-type 设置,也可以调用 openExport 方法打开导出面板 官网: https://vxetable.cn npm install vxe-pc
阅读全文
摘要:官网: https://vxetable.cn 复制粘贴,通过 keyboard-config.isClip 启用,支持快捷键操作: Ctrl + A 选择全部单元格; Ctrl + X 将单元格标记为剪贴状态并将内容复制到剪贴板(支持 Excel 和 WPS) ; Ctrl + C 将单元格标记为
阅读全文
摘要:官网: https://vxetable.cn 查找与替换,通过 keyboard-config.isFNR 启用,支持快捷键 Ctrl + F 查找数据,全表或指定区域查找数据 ; Ctrl + H 替换数据,全表或指定区域替换数据 ; <template> <div> <vxe-table bo
阅读全文
摘要:官网: https://vxetable.cn 在公司开发列表时,经常会遇到需求打印出货单,接下来分享如何在 vxe-table 灵活的使用打印功能,非常简单就能实现能自定义的出货单打印。 安装 npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 // ... i
阅读全文