随笔分类 - vxe-table
摘要:当需要再表格中的某个字段是关联另外一张表示,需要将从另外表选择数据,并将数据保存在当前行中 官网: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
阅读全文
摘要:在使用 vxe-grid 时,需要实现表尾合计功能,通过单元格编辑之后,实时自动计算表尾合计的值,自动更新表尾合计数据,实现方式通过监听change 事件,从而实现实时更新合计功能。 官网:https://vxetable.cn 可以使用插槽模板,也可以使用配置式,下面是配置式的用法: <templ
阅读全文
摘要: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
阅读全文