通过手动调用 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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.js"></script>// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginExportPDF from '@vxe-ui/plugin-export-pdf'// ...// 确保 window.jsPDF 变量存在即表示安装完成VxeUI.use(VxeUIPluginExportPDF, { // 安装中文字体 // fontName: 'SourceHanSans-Normal', // fonts: [ // { // fontName: 'SourceHanSans-Normal', // fontUrl: 'https://cdn.jsdelivr.net/npm/@vxe-ui/plugin-export-pdf@4.0.8/fonts/source-han-sans-normal.js' // 字体库非常大，建议下载到项目本地 // } // ]})  <template> <div> <vxe-button @click="exportEvent">高级导出</vxe-button> <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { const gridOptions = { border: true, showFooter: true, exportConfig: { type: 'pdf' }, columns: [ { field: 'seq', type: 'seq', width: 70 }, { title: '分组1', children: [ { field: 'name', title: 'Name' }, { field: 'role', title: 'Role' } ] }, { field: 'sex', title: 'Sex' }, { field: 'age', title: 'Age' } ], data: [ { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: '李四', role: 'Test', sex: 'Women', age: 22, address: '广东省' }, { id: 10003, name: '王五', role: 'PM', sex: 'Man', age: 32, address: '上海' }, { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ], footerData: [ { seq: '合计', name: '888人', age: 666 } ] } return { gridOptions } }, methods: { exportEvent () { const $grid = this.$refs.gridRef if ($grid) { $grid.openExport() } } } } </script>转载自https://www.cnblogs.com/qaz666/p/18560790

通过手动调用 exportData 方法可以直接导出文件，导出时单元格类型默认是自动转换的，如果是需要字符串类型，可以通过 column.cell-type 设置，也可以调用 openExport 方法打开导出面板npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-export-xlsx@4.0.7 exceljs@4.2.1<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'// ...// 确保 window.ExcelJS 变量存在即表示安装完成VxeUI.use(VxeUIPluginExportXLSX) <template> <div> <vxe-button @click="exportEvent">高级导出</vxe-button> <vxe-table border show-footer ref="tableRef" :export-config="{type: 'xlsx'}" :data="tableData" :merge-cells="mergeCells" :footer-data="footerData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-colgroup title="分组1"> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="role" title="Role"></vxe-column> </vxe-colgroup> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: '张三', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: '李四', role: 'Test', sex: 'Women', age: 22, address: '广东省' }, { id: 10003, name: '王五', role: 'PM', sex: 'Man', age: 32, address: '上海' }, { id: 10004, name: '老六', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }, { id: 10005, name: '小七', role: 'Designer', sex: 'Man', age: 37, address: '广东省' }, { id: 10006, name: '小八', role: 'Designer', sex: 'Man', age: 39, address: 'Shanghai' } ] const mergeCells = [ { row: 0, col: 2, rowspan: 2, colspan: 2 }, { row: 2, col: 1, rowspan: 3, colspan: 2 } ] const footerData = [ { seq: '合计', name: '12人', no1: 356 } ] return { tableData, mergeCells, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.openExport() } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560771

复制粘贴，通过 keyboard-config.isClip 启用，支持快捷键操作：Ctrl + A 选择全部单元格;Ctrl + X 将单元格标记为剪贴状态并将内容复制到剪贴板（支持 Excel 和 WPS） ;Ctrl + C 将单元格标记为复制状态并将内容复制到剪贴板（支持 Excel 和 WPS） ;Ctrl + V 将剪贴板的内容粘贴到指定区域中（支持 Excel 和 WPS） ; <template> <div> <vxe-table border show-overflow height="500" :column-config="columnConfig" :mouse-config="mouseConfig" :area-config="areaConfig" :edit-config="editConfig" :keyboard-config="keyboardConfig" :data="tableData"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="Name" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="role" title="Role" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="sex" title="Sex" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="num" title="Num" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="age" title="Age" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="address" title="Address" width="200" :edit-render="{ name: 'input' }"></vxe-column> </vxe-table> </div> </template> <script setup> import { ref, reactive } from 'vue' const tableData = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', num: 23, age: 28, address: 'Shengzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', num: 23, age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', num: 23, age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', num: 456, age: 24, address: 'Shanghai' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', num: 23, age: 42, address: 'Guangzhou' }, { id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', num: 23, age: 38, address: 'Shengzhen' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', num: 100, age: 24, address: 'Shengzhen' }, { id: 10008, name: 'Test8', role: 'PM', sex: 'Man', num: 345, age: 34, address: 'Shanghai' }, { id: 10009, name: 'Test9', role: 'Designer', sex: 'Man', num: 67, age: 52, address: 'Shanghai' }, { id: 10010, name: 'Test10', role: 'Test', sex: 'Women', num: 23, age: 44, address: 'Guangzhou' }, { id: 10011, name: 'Test11', role: 'Designer', sex: 'Man', num: 56, age: 52, address: 'Shanghai' }, { id: 10012, name: 'Test12', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Guangzhou' }, { id: 10013, name: 'Test13', role: 'Test', sex: 'Women', num: 38, age: 16, address: 'Shanghai' }, { id: 10014, name: 'Test14', role: 'Test', sex: 'Man', num: 37, age: 16, address: 'Shengzhen' }, { id: 10015, name: 'Test15', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Shengzhen' }, { id: 10016, name: 'Test16', role: 'Test', sex: 'Women', num: 58, age: 16, address: 'Guangzhou' }, { id: 10017, name: 'Test17', role: 'Test', sex: 'Man', num: 23, age: 16, address: 'Shanghai' }, { id: 10018, name: 'Test18', role: 'Test', sex: 'Women', num: 52, age: 16, address: 'Shengzhen' }, { id: 10019, name: 'Test19', role: 'Test', sex: 'Man', num: 37, age: 16, address: 'Guangzhou' }, { id: 10020, name: 'Test20', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Shanghai' }, { id: 10021, name: 'Test21', role: 'Test', sex: 'Man', num: 56, age: 16, address: 'Shengzhen' }, { id: 10022, name: 'Test22', role: 'Test', sex: 'Women', num: 49, age: 16, address: 'Guangzhou' }, { id: 10023, name: 'Test23', role: 'Test', sex: 'Man', num: 48, age: 16, address: 'Shengzhen' } ]) const columnConfig = reactive({ resizable: true }) const mouseConfig = reactive({ area: true // 是否开启区域选取 }) const areaConfig = reactive({ multiple: true // 是否启用多区域选取功能 }) const editConfig = reactive({ mode: 'cell', trigger: 'dblclick' }) const keyboardConfig = reactive({ isClip: true, isEdit: true, isDel: true, isEsc: true // 是否开启Esc键关闭编辑功能 }) </script> 转载自https://www.cnblogs.com/qaz666/p/18560758

查找与替换，通过 keyboard-config.isFNR 启用,支持快捷键Ctrl + F 查找数据，全表或指定区域查找数据 ;Ctrl + H 替换数据，全表或指定区域替换数据 ;  <template> <div> <vxe-table border show-overflow height="500" :column-config="{resizable: true}" :mouse-config="{area: true}" :keyboard-config="{isFNR: true}" :data="tableData"> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="role" title="Role"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="num" title="Num"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> <vxe-column field="address" title="Address" width="300"></vxe-column> </vxe-table> </div> </template> <script setup> import { ref } from 'vue' const tableData = ref([ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', num: 23, age: 28, address: 'Shengzhen' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', num: 23, age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', num: 23, age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', num: 456, age: 24, address: 'Shanghai' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', num: 23, age: 42, address: 'Guangzhou' }, { id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', num: 23, age: 38, address: 'Shengzhen' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', num: 100, age: 24, address: 'Shengzhen' }, { id: 10008, name: 'Test8', role: 'PM', sex: 'Man', num: 345, age: 34, address: 'Shanghai' }, { id: 10009, name: 'Test9', role: 'Designer', sex: 'Man', num: 67, age: 52, address: 'Shanghai' }, { id: 10010, name: 'Test10', role: 'Test', sex: 'Women', num: 23, age: 44, address: 'Guangzhou' }, { id: 10011, name: 'Test11', role: 'Designer', sex: 'Man', num: 56, age: 52, address: 'Shanghai' }, { id: 10012, name: 'Test12', role: 'Test', sex: 'Women', num: 23, age: 16, address: 'Guangzhou' } ]) </script>转载自https://www.cnblogs.com/qaz666/p/18560751 

在公司开发列表时，经常会遇到需求打印出货单，接下来分享如何在 vxe-table 灵活的使用打印功能，非常简单就能实现能自定义的出货单打印。安装npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3// ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'import VxeUITable from 'vxe-table'import 'vxe-table/lib/style.css'// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')// ...页面效果页面上的打印区用蓝色边框标注了，方便看出效果  点击打印后，完整的将指定的区域打印出来，也可以添加自定义内容，非常灵活。不仅支持去掉页头、页尾，自定义标题、分页等等，灵活自定义程度非常高  <template> <div> <vxe-button content="点击打印" @click="printEvent"></vxe-button> <div style="border: 1px solid #409eff; padding: 16px"> <div ref="topElRef"> <div style="margin-bottom: 8px;"> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">商品名称：Vxe 企业授权</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货单号：X2665847132654</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">发货日期：2024-12-01</div> </div> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收货姓名：小徐</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">收货地址：火星第七区18号001</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">联系电话：10086</div> </div> </div> </div> <vxe-table border ref="tableRef" height="300" :print-config="{}" :data="tableData"> <vxe-column type="checkbox" width="60"></vxe-column> <vxe-column type="seq" width="60"></vxe-column> <vxe-column field="name" title="名称"></vxe-column> <vxe-column field="code" title="编码"></vxe-column> <vxe-column field="num" title="数量"></vxe-column> <vxe-column field="price" title="价格"></vxe-column> <vxe-column field="taxRate" title="税率"></vxe-column> </vxe-table> <div ref="bottomElRef"> <div style="margin-top: 30px;text-align: right;"> <div style="display: inline-block;width: 100%;"> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;"></div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">创建人：小徐</div> <div style="float: left; width: 33.33%;height: 28px;line-height: 28px;">创建日期：2024-12-01</div> </div> </div> </div> </div> </div></template><script>import { VxeUI } from 'vxe-table'export default { data () { const tableData = [ { id: 10001, name: '筛选插件', code: 'T1', price: 1200, num: 1, taxRate: '3%' }, { id: 10002, name: '区域选取插件', code: 'T2', price: 16840, num: 3, taxRate: '3%' }, { id: 10003, name: '单元格选取插件', code: 'T3', price: 8460, num: 3, taxRate: '3%' }, { id: 10004, name: 'Excel 筛选插件', code: 'T4', price: 980, num: 2, taxRate: '3%' }, { id: 10005, name: '零代码平台模板', code: 'T5', price: 23199, num: 5, taxRate: '3%' }, { id: 10006, name: '后台管理系统模板', code: 'T6', price: 899, num: 7, taxRate: '3%' }, { id: 10007, name: '低代码设计器插件', code: 'T7', price: 1688, num: 4, taxRate: '3%' }, { id: 10008, name: '可视化拖拽插件', code: 'T8', price: 1299, num: 4, taxRate: '3%' } ] return { tableData } }, methods: { async printEvent () { const $table = this.$refs.tableRef if ($table) { const printRest = await $table.getPrintHtml() const topEl = this.$refs.topElRef const bottomEl = this.$refs.bottomElRef const topHtml = topEl ? topEl.innerHTML : '' const bottomHtml = bottomEl ? bottomEl.innerHTML : '' VxeUI.print({ title: '出货单据', pageBreaks: [ // 第一页 { bodyHtml: topHtml + printRest.html + bottomHtml } ] }) } } }}</script>转载自https://www.cnblogs.com/qaz666/p/18560674

安装npm install vxe-pc-ui@4.3.22 vxe-table@4.9.19// ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'import VxeUITable from 'vxe-table'import 'vxe-table/lib/style.css'// ...createApp(App).use(VxeUI).use(VxeUITable).mount('#app')// ...打印图片<template> <div> <vxe-print ref="printRef" custom-layout> <img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;"> </vxe-print> <vxe-button @click="printEvent1">直接打印</vxe-button> <vxe-button @click="printEvent2">调用方法打印</vxe-button> </div></template><script>import { VxeUI } from 'vxe-pc-ui'export default { data () { return {} }, methods: { printEvent1 () { const $print = this.$refs.printRef if ($print) { $print.print() } }, printEvent2 () { VxeUI.print({ html: ` <img src="https://vxeui.com/resource/img/invoice345.png" style="width: 100%;"> ` }) } }}</script>自定义页眉<template> <div> <vxe-print ref="printRef"> <template #header> <div style="font-size: 20px;padding-top: 20px;text-align: center;">自定义标题222222222</div> </template> <vxe-print-page-break> <div>第一页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> <vxe-print-page-break> <div>第二页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> <vxe-print-page-break> <div>第三页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> </vxe-print> <vxe-button @click="printEvent1">直接打印</vxe-button> <vxe-button @click="printEvent2">调用方法打印</vxe-button> </div></template><script>import { VxeUI } from 'vxe-pc-ui'export default { data () { return {} }, methods: { printEvent1 () { const $print = this.$refs.printRef if ($print) { $print.print() } }, printEvent2 () { VxeUI.print({ headerHtml: '<div style="font-size: 20px;padding-top: 20px;text-align: center;">自定义标题222222222</div>', pageBreaks: [ { bodyHtml: ` <div>第一页</div> <div>内容</div> <div>内容</div> ` }, { bodyHtml: ` <div>第二页</div> <div>内容</div> <div>内容</div> ` }, { bodyHtml: ` <div>第三页</div> <div>内容</div> <div>内容</div> ` } ] }) } }}</script>自定义页尾和页数<template> <div> <vxe-print ref="printRef" title="标题33"> <vxe-print-page-break> <div>第一页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> <vxe-print-page-break> <div>第二页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> <vxe-print-page-break> <div>第三页</div> <div>内容</div> <div>内容</div> </vxe-print-page-break> <template #footer="{ currentPage, pageCount }"> <div style="font-size: 20px;padding-top: 20px;text-align: center;"> <span>自定义页尾，当前页码：{{ currentPage }}/{{ pageCount }}</span> </div> </template> </vxe-print> <vxe-button @click="printEvent1">直接打印</vxe-button> <vxe-button @click="printEvent2">调用方法打印</vxe-button> </div></template><script>import { VxeUI } from 'vxe-pc-ui'export default { data () { return {} }, methods: { printEvent1 () { const $print = this.$refs.printRef if ($print) { $print.print() } }, printEvent2 () { VxeUI.print({ title: '标题33', footerHtml ({ currentPage, pageCount }) { return ` <div style="font-size: 20px;padding-top: 20px;text-align: center;"> <span>自定义页尾，当前页码：${currentPage}/${pageCount}</span> </div>` }, pageBreaks: [ { bodyHtml: ` <div>第一页</div> <div>内容</div> <div>内容</div> ` }, { bodyHtml: ` <div>第二页</div> <div>内容</div> <div>内容</div> ` }, { bodyHtml: ` <div>第三页</div> <div>内容</div> <div>内容</div> ` } ] }) } }}</script>分页打印表格<template> <div> <vxe-button @click="printEvent">分页打印表格</vxe-button> <vxe-table border height="500" ref="tableRef" :data="tableData"> <vxe-column field="id" title="ID" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="address" title="Address"></vxe-column> </vxe-table> </div></template><script>import { VxeUI } from 'vxe-table'import XEUtils from 'xe-utils'export default { data () { return { tableData: [] } }, methods: { printEvent () { const $table = this.$refs.tableRef if ($table) { // 分割每页26条 Promise.all(XEUtils.chunk(this.tableData, 26).map(pageData => { return $table.getPrintHtml({ data: pageData }).then(({ html }) => { return { bodyHtml: html } }) })).then(pageBreaks => { VxeUI.print({ title: '分页打印表格', showPageNumber: true, pageBreaks }) }) } } }, created () { const list = [] for (let i = 0; i < 100; i++) { list.push({ id: 10001 + i, name: 'Test1', role: 'Develop', sex: 'Man', address: 'test abc' }) } this.tableData = list }}</script>

TinyVue是一个跨端跨框架的企业级UI组件库，基于renderless无渲染组件设计架构，实现了一套代码同时支持Vue2和Vue3，支持PC和移动端，包含100多个功能丰富的精美组件，可帮助开发者高效开发Web应用。  4月28日晚19点，泽瑞科技前端架构师、鸿蒙开源布道师、阿里友盟KOL将为大家分享如何基于TinyVue组件库定制企业级UI体系，欢迎大家进入直播间一起讨论

正常情况下如果需要使用文本超出隐藏，通过 css 就可以完成overflow: hidden;text-overflow: ellipsis;white-space: nowrap;但是如果需要实现多行文本溢出，就很难实现里，谷歌浏览器虽然支持 css 多行溢出，大部分浏览器又不支持，所以作用也不大。可以通过 vxe-text-ellipsis 来实现多行文本溢出隐藏。安装npm install vxe-pc-ui// ...import VxeUI from 'vxe-pc-ui'import 'vxe-pc-ui/lib/style.css'// ...createApp(App).use(VxeUI).mount('#app')// ...参数 line-clamp 用于指定多少行自动隐藏溢出。单行<template> <div style="width: 400px;"> <vxe-text-ellipsis line-clamp="1" content="这是一个单行文本，超出一行之后会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis> </div></template>多行<template> <div style="width: 400px;"> <vxe-text-ellipsis line-clamp="4" content="这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。"></vxe-text-ellipsis> </div></template>在表格中使用<template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div></template><script>export default { data () { const addressCellRender = { name: 'VxeTextEllipsis', props: { lineClamp: 3 } } const gridOptions = { border: true, height: 500, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'sex', title: 'Sex', width: 100 }, { field: 'address', title: '多行文本溢出省略', width: 400, cellRender: addressCellRender } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: '这是一个多行的文本溢出省略组件' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10005, name: 'Test5', role: 'Designer', sex: 'Women', age: 42, address: '这是一个多行的文本溢出省略组件' }, { id: 10006, name: 'Test6', role: 'PM', sex: 'Women', age: 36, address: '这是一个多行的文本溢出省略组件' }, { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 39, address: '这是一个多行的文本溢出省略组件，用于实现多行文本溢出省略，这将非常有用，如果没有超出，则显示全部文本，如超出指定行数之后，文字会被会自动截断，并且会出现省略，后面文字会被隐藏将不会被显示出来。' }, { id: 10008, name: 'Test8', role: 'Designer', sex: 'Women', age: 56, address: '这是一个多行的文本溢出省略组件' } ] } return { gridOptions, addressCellRender } }}</script>

<template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="showPopup" title="标题1" :width="600" :height="400" resize> <div>鼠标点击窗口边缘，按住边缘拖拽调整窗口宽和高</div> <div>按住头部移动！</div> <div>按住左边距拖动！</div> <div>按住右边距拖动！</div> <div>按住底边距拖动！</div> <div>按住左下角拖动 ！</div> <div>按住右下角拖动！</div> </vxe-modal> </div> </template> <script> export default { data () { return { showPopup: false } } } </script>

<template> <div> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: `标题 ${this.num}`, content: `我是第 ${this.num} 个`, mask: false, lockView: false, escClosable: true, width: 600, height: 400, showZoom: true }) this.num++ } } } </script>

<template> <div> <p> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </p> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: '标题1', content: `每点击一次弹出一个，第 ${this.num++} 个`, mask: false, lockView: false, width: 600, height: 400 }) } } } </script>

<template> <div> <p> <vxe-button content="点击弹出" @click="openEvent"></vxe-button> </p> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { return { num: 1 } }, methods: { openEvent () { VxeUI.modal.open({ title: '标题1', content: `每点击一次弹出一个，第 ${this.num++} 个`, mask: false, lockView: false, width: 600, height: 400 }) } } } </script>

<template> <div> <vxe-button content="点击弹出" @click="showPopup = true"></vxe-button> <vxe-modal v-model="showPopup" :width="600" :height="400"> <div>鼠标点击头部，按住移动窗口</div> </vxe-modal> </div> </template> <script> export default { data () { return { showPopup: false } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { validConfig: { theme: 'beautify' }, data: { name: '', nickname: '', sex: '', age: '' }, rules: { name: [ { required: true, message: '请输入名称' } ], sex: [ { required: true, message: '请选择性别' } ], age: [ { required: true, message: '请输入年龄' } ] }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>

<template> <div> <vxe-form v-bind="formOptions" @submit="submitEvent" @reset="resetEvent"> </vxe-form> </div> </template> <script> import { VxeUI } from 'vxe-pc-ui' export default { data () { const formOptions = { validConfig: { theme: 'beautify' }, data: { name: '', nickname: '', sex: '', age: '' }, rules: { name: [ { required: true, message: '请输入名称' } ], sex: [ { required: true, message: '请选择性别' } ], age: [ { required: true, message: '请输入年龄' } ] }, items: [ { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } }, { field: 'sex', title: '性别', span: 12, itemRender: { name: 'VxeInput' } }, { field: 'age', title: '年龄', span: 12, itemRender: { name: 'VxeInput' } }, { align: 'center', span: 24, itemRender: { name: 'VxeButtonGroup', options: [ { type: 'submit', content: '提交', status: 'primary' }, { type: 'reset', content: '重置' } ] } } ] } return { formOptions } }, methods: { submitEvent () { VxeUI.modal.message({ content: '保存成功', status: 'success' }) }, resetEvent () { VxeUI.modal.message({ content: '重置事件', status: 'info' }) } } } </script>