一.webpack和vite的区别1.构建速度不同Webpack: Webpack的构建速度相对较慢，尤其在大型项目中，因为它需要分析整个依赖图，进行多次文件扫描和转译。Vite: Vite以开发模式下的极速构建著称。它利用ES模块的特性，只有在真正需要时才编译文，而不是整个项目。这使得它在开发环境下几乎是即时的。2.开发模式不同Webpack: Webpack通常使用热模块替换（HMR）来实现快速开发模式，但配置相对复杂。Vite: 采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。3.配置复杂度不同Webpack: Webpack的配置相对复杂，特别是在处理不同类型的资源和加载器时。Vite: Vite在设计上更注重开箱即用，大部分场景下用户无需自己写配置文件，但同时也支持自定义配置，使其适用于复杂项目。4.插件生态不同Webpack: Webpack拥有庞大的插件生态系统，适用于各种不同的需求。Vite: Vite也有相当数量的插件，但相对较小，因为它的开发模式和构建方式减少了对一些传统插件的需求。5.编译方式不同Webpack: webpack在编译过程中，会将所有模块打包为一个bundle.js文件，然后再运行这个文件。Vite: 没有打包的步骤，它利用了浏览器的ES Module Imports特性，只有在真正需要时才编译文件。6.应用场景不同Webpack: 适用于复杂的大型项目，特别是需要大量自定义配置和复杂构建管道的项目。Vite: 更适用于小到中型项目，或者需要快速开发原型和小型应用的场景。二.为什么vite启动速度比webpack快？1、开发模式的差异12345在开发环境中，Webpack 是先打包再启动开发服务器，而 Vite 则是直接启动，然后再按需编译依赖文件。（大家可以启动项目后检查源码 Sources 那里看到） 这意味着，当使用 Webpack 时，所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。 而 Vite 则采用了不同的策略，它会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多，Vite 的优势更为明显。Webpack启动Vite启动2、对ES Modules的支持现代浏览器本身就支持 ES Modules，会主动发起请求去获取所需文件。Vite充分利用了这一点，将开发环境下的模块文件直接作为浏览器要执行的文件，而不是像 Webpack 那样先打包，再交给浏览器执行。这种方式减少了中间环节，提高了效率。什么是ES Modules？通过使用 export 和 import 语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置 type="module"来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。3、底层语言的差异Webpack 是基于 Node.js 构建的，而 Vite 则是基于 esbuild 进行预构建依赖。esbuild 是采用 Go 语言编写的，Go 语言是纳秒级别的，而 Node.js 是毫秒级别的。因此，Vite 在打包速度上相比Webpack 有 10-100 倍的提升。什么是预构建依赖？预构建依赖通常指的是在项目启动或构建之前，对项目中所需的依赖项进行预先的处理或构建。这样做的好处在于，当项目实际运行时，可以直接使用这些已经预构建好的依赖，而无需再进行实时的编译或构建，从而提高了应用程序的运行速度和效率。4、热更新的处理在 Webpack 中，当一个模块或其依赖的模块内容改变时，需要重新编译这些模块。而在 Vite 中，当某个模块内容改变时，只需要让浏览器重新请求该模块即可，这大大减少了热更新的时间。总结总的来说，Vite 之所以比 Webpack 快，主要是因为它采用了不同的开发模式、充分利用了现代浏览器的 ES Modules 支持、使用了更高效的底层语言，并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势，能够快速启动和构建，提高开发效率。

vxe-table 如何在单元格内容渲染成可点击复制的文本通过 cellRender.name='VxeText'，设置参数 clickToCopy=true 就可以开启文本复制功能，点击复制回会自动将文本复制到剪贴板<template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' const roleCellRender = reactive({ name: 'VxeText', props: { clickToCopy: true } }) const addressCellRender = reactive({ name: 'VxeText', props: { clickToCopy: true, status: 'error' } }) const gridOptions = reactive({ border: true, showOverflow: true, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name', minWidth: 200 }, { field: 'role', title: 'Role', width: 120, cellRender: roleCellRender }, { field: 'address', title: 'Address', width: 300, cellRender: addressCellRender } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] }) </script>

vxe-tree-select 树形下拉框当使用懒加载数据时如何回显当使用懒加载或者当某个选项被删除时，显示自定义回显；比如使用懒加载树列表，由于数据未被加载，这时候已选的数据就不能被回显，导致显示了 value值，而不是 label。还有一种场景就是组织架构人员选择，当选择某个人员后，可能人员变动离职，数据被删掉了，这个时候也无法回显。那么怎么解决以上几种情况，解决方式也很简单官网：https://vxeui.comgithub：https://github.com/x-extends/vxe-pc-uigitee：https://gitee.com/x-extends/vxe-pc-ui问题无法显示对应的label解决效果比如以下懒加载树选择，所有的子项都没有点击加载，也可以正确回显label代码可以通过设置 lazy-options 来将指定节点放入用来回显，将不存在选项的数据额外放到这里，就可以实现自动回显<template> <div> <vxe-tree-select v-model="val1" :options="treeList" :lazy-options="lazyList" :treeConfig="treeConfig" multiple clearable></vxe-tree-select> </div> </template> <script setup> import { ref, reactive } from 'vue' const val1 = ref(['4-2']) const treeConfig = reactive({ lazy: true, loadMethod ({ node }) { return getNodeListApi(node) } }) const treeList = ref([ { label: '节点2', value: '2', hasChild: true }, { label: '节点3', value: '3', hasChild: true }, { label: '节点4', value: '4', hasChild: true }, { label: '节点5', value: '5', hasChild: false } ]) const lazyList = ref([ { label: '节点4-2', value: '4-2' } ]) let treeKey = 1 const getNodeListApi = (node) => { return new Promise(resolve => { // 模拟后端接口 setTimeout(() => { resolve([ { label: `节点${node.value}-${treeKey}`, value: `节点${node.value}-${treeKey}`, hasChild: Math.random() * 10 < 6 }, { label: `节点${node.value}-${treeKey + 1}`, value: `节点${node.value}-${treeKey + 1}`, hasChild: Math.random() * 10 < 6 } ]) treeKey += 2 }, 500) }) } </script>

一、Vue.js 简介Vue.js 是一套用于构建用户界面的渐进式框架，由尤雨溪创建。与其他大型框架不同，Vue 被设计为可以自底向上逐层应用，核心库只关注视图层，易于上手，也便于与第三方库或既有项目整合。Vue 的核心特性：响应式数据绑定：自动追踪依赖，更新DOM组件系统：可复用、可组合的UI组件虚拟DOM：高效的DOM更新策略丰富的生态系统：Vue Router、Vuex、Vue CLI等工具支持二、快速开始1. 安装方式CDN引入（适合快速原型开发）：html <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>使用Vue CLI（推荐生产环境使用）：bash npm install -g @vue/clivue create my-projectcd my-projectnpm run serve2. 基础示例html <div id="app"> <h1>{{ message }}</h1> <button @click="reverseMessage">反转消息</button></div><script>const { createApp } = VuecreateApp({ data() { return { message: 'Hello Vue!' } }, methods: { reverseMessage() { this.message = this.message.split('').reverse().join('') } }}).mount('#app')</script>三、核心概念详解1. 模板语法Vue 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。html <div id="bind-attribute"> <span v-bind:title="message">悬停查看动态绑定的提示信息！</span> <!-- 缩写 --> <span :title="message">简写形式</span></div>2. 计算属性和侦听器计算属性：js computed: { reversedMessage() { return this.message.split('').reverse().join('') }}侦听器：js watch: { message(newVal, oldVal) { console.log(`消息从"${oldVal}"变为"${newVal}"`) }}3. 条件渲染和列表渲染v-if：html <p v-if="seen">现在你看到我了</p><p v-else>你看不到我了</p>v-for：html <ul> <li v-for="(item, index) in items" :key="item.id"> {{ index }} - {{ item.text }} </li></ul>4. 组件系统组件定义：js // 定义一个名为 button-counter 的新组件app.component('button-counter', { data() { return { count: 0 } }, template: ` <button @click="count++"> 点了 {{ count }} 次！ </button> `})组件使用：html <div id="components-demo"> <button-counter></button-counter></div>四、Vue 3 新特性1. Composition APIjs import { ref, computed, onMounted } from 'vue'export default { setup() { const count = ref(0) const double = computed(() => count.value * 2) function increment() { count.value++ } onMounted(() => { console.log('组件已挂载') }) return { count, double, increment } }}2. Teleport 传送门html <teleport to="body"> <div class="modal" v-if="showModal"> 我是一个模态框！ </div></teleport>3. 片段(Fragments)html <template> <header>...</header> <main>...</main> <footer>...</footer></template>五、生态系统1. Vue Routerjs import { createRouter, createWebHistory } from 'vue-router'const routes = [ { path: '/', component: Home }, { path: '/about', component: About }]const router = createRouter({ history: createWebHistory(), routes})2. Vuex/Pinia 状态管理Vuex示例：js const store = createStore({ state() { return { count: 0 } }, mutations: { increment(state) { state.count++ } }})3. Vue CLI 和 Vite使用Vite创建项目：bash npm init vite@latest my-vue-app --template vuecd my-vue-appnpm installnpm run dev六、最佳实践组件设计原则：单一职责原则合理的props/emit设计可复用性考虑性能优化：合理使用v-if和v-show列表渲染使用key组件懒加载代码组织：按功能而非类型组织代码使用Composition API提取可复用逻辑统一代码风格Vue.js 以其简洁的API设计、灵活的组件系统和活跃的社区，已成为现代Web开发的主流选择之一。无论是小型项目还是大型企业应用，Vue都能提供高效的开发体验和出色的性能表现。

vxe-table 树表格拖拽排序，支持拖拽到空节点，直接拖拽成子级；通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级 通过 row-drag-config.isToChildDrag 启用便捷拖拽成子节点，拖拽的同时按住 Ctrl 键可以自动拖放到该节点的子级<template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' const gridOptions = reactive({ border: true, rowConfig: { useKey: true, drag: true }, rowDragConfig: { isCrossDrag: true, isSelfToChildDrag: true, isToChildDrag: true }, columnConfig: { useKey: true }, treeConfig: { transform: true, rowField: 'id', parentField: 'parentId' }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name', minWidth: 300, treeNode: true, dragSort: true }, { field: 'size', title: 'Size' }, { field: 'type', title: 'Type' }, { field: 'date', title: 'Date' } ], data: [ { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' }, { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' }, { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' }, { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' }, { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' }, { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' }, { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' }, { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' }, { id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' }, { id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' }, { id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' }, { id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' }, { id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' } ] }) </script> 转载自https://www.cnblogs.com/qaz666/p/18598387

vxe-table 树结构单元格选取与复制粘贴，通过 tree-config.transform 使用树形表格 <template> <div> <vxe-table border show-overflow keep-source height="600" :column-config="columnConfig" :tree-config="treeConfig" :mouse-config="mouseConfig" :area-config="areaConfig" :edit-config="editConfig" :clip-config="clipConfig" :keyboard-config="keyboardConfig" :data="tableData"> <vxe-column type="seq" width="80"></vxe-column> <vxe-column field="name" title="名称" min-width="300" tree-node :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="size" title="大小" width="140" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="type" title="类型" width="140" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="createBy" title="创建人" width="200" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="updateDate" title="修改时间" width="200" :edit-render="{ name: 'input' }"></vxe-column> <vxe-column field="createDate" title="创建时间" width="200" :edit-render="{ name: 'input' }"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10000, parentId: null, name: '文件1.xlsx', type: 'xlsx', size: 1024, createBy: '王五', updateDate: '2020-09-11', createDate: '2020-08-01' }, { id: 10050, parentId: null, name: '部署目录', type: '', size: 0, createBy: '老六', updateDate: '2020-08-01', createDate: '2021-04-01' }, { id: 24300, parentId: 10050, name: '菜单配置.avi', type: 'avi', size: 1024, createBy: '小芳', updateDate: '2020-10-24', createDate: '2020-03-01' }, { id: 20045, parentId: 24300, name: '角色说明.html', type: 'html', size: 600, createBy: '老徐', updateDate: '2020-08-01', createDate: '2021-04-01' }, { id: 10053, parentId: 24300, name: '权限配置.avi', type: 'avi', size: 0, createBy: '老胡', updateDate: '', createDate: '2021-04-01' }, { id: 24330, parentId: 10053, name: '部署秘钥.txt', type: 'txt', size: 25, createBy: '张三', updateDate: '2020-09-11', createDate: '2021-10-01' }, { id: 21011, parentId: 10053, name: '流程文档。pdf', type: 'pdf', size: 512, createBy: '老张', updateDate: '2020-08-01', createDate: '2020-01-01' }, { id: 22200, parentId: 10053, name: '解决 bug 文件.js', type: 'js', size: 1024, createBy: '小刘', updateDate: '2020-10-24', createDate: '2021-06-01' }, { id: 23666, parentId: null, name: '发版目录', type: '', size: 2048, createBy: '老刘', updateDate: '2020-02-18', createDate: '2020-11-01' }, { id: 23677, parentId: 23666, name: '替换问题文件.js', type: 'js', size: 1024, createBy: '老冯', updateDate: '2020-09-11', createDate: '2021-06-01' }, { id: 23671, parentId: 23677, name: '发布流程.avi', type: 'avi', size: 1024, createBy: '小牛', updateDate: '2020-08-01', createDate: '2021-06-01' }, { id: 23672, parentId: 23677, name: '配置流程.mp4', type: 'mp4', size: 1024, createBy: '李四', updateDate: '2020-02-09', createDate: '2021-06-01' }, { id: 23688, parentId: 23666, name: '测试流程.mp4', type: 'mp4', size: 1024, createBy: '小三', updateDate: '2020-10-24', createDate: '2021-06-01' }, { id: 23681, parentId: 23688, name: '问题记录.txt', type: 'txt', size: 1024, createBy: '小李', updateDate: '2020-08-01', createDate: '2021-06-01' }, { id: 23682, parentId: 23688, name: '发布说明.html', type: 'html', size: 1024, createBy: '小徐', updateDate: '2020-02-18', createDate: '2021-06-01' }, { id: 24555, parentId: null, name: '资源目录', type: '', size: 224, createBy: '小小', updateDate: '2020-08-01', createDate: '2020-10-01' }, { id: 24566, parentId: 24555, name: '铃声文件.mp3', type: 'mp3', size: 1024, createBy: '老八', updateDate: '2020-02-29', createDate: '2021-06-01' }, { id: 24577, parentId: 24555, name: '上线人员列表.xlsx', type: 'xlsx', size: 1024, createBy: '小红', updateDate: '2020-08-01', createDate: '2021-06-01' } ] const columnConfig = { resizable: true } const treeConfig = { transform: true, rowField: 'id', parentField: 'parentId' } const mouseConfig = { area: true // 是否开启区域选取 } const areaConfig = { multiple: true // 是否启用多区域选取功能 } const editConfig = { mode: 'cell', trigger: 'dblclick', showStatus: true } const clipConfig = { isDeepPaste: true // 是否深层粘贴，用于树结构，启用后粘贴时会覆盖到子级数据进行粘贴 } const keyboardConfig = { isClip: true, isArrow: true, isShift: true, isTab: true, isEnter: true, isEdit: true, isDel: true, isEsc: true, isFNR: true // 是否开启查找与替换 } return { tableData, columnConfig, treeConfig, mouseConfig, areaConfig, editConfig, clipConfig, keyboardConfig } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18578665

 <template> <div> <vxe-table border header-align="center" align="left" :data="tableData"> <vxe-column type="seq" width="70"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <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: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] return { tableData } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18566295

<template> <div> <vxe-upload v-model="imgList" mode="image" multiple show-progress :upload-method="uploadMethod"></vxe-upload> </div> </template> <script> import axios from 'axios' export default { data () { const imgList = [] const uploadMethod = ({ file }) => { const formData = new FormData() formData.append('file', file) return axios.post('/api/pub/upload/single', formData).then((res) => { return { ...res.data } }) } return { imgList, uploadMethod } } } </script>转载自https://www.cnblogs.com/qaz666/p/18563025

 <template> <div> <vxe-button status="success" @click="resultEvent">获取列</vxe-button> <vxe-table border ref="tableRef" :column-config="columnConfig" :data="tableData"> <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="age" title="Age"></vxe-column> <vxe-column field="address" title="Address"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const columnConfig = { useKey: true, drag: true } return { tableData, columnConfig } }, methods: { resultEvent () { const $table = this.$refs.tableRef if ($table) { const { visibleColumn } = $table.getTableColumn() console.log(visibleColumn) } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18562144

 <template> <div> <vxe-table border ref="tableRef" :row-config="rowConfig" :column-config="columnConfig" :data="tableData"> <vxe-column field="name" title="Name" drag-sort></vxe-column> <vxe-column field="role" title="Role" drag-sort></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> <vxe-column field="address" title="Address" drag-sort></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const rowConfig = { useKey: true, drag: true } const columnConfig = { useKey: true } return { tableData, rowConfig, columnConfig } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18562136

在 vxe-table 中使用 vxe-grid 渲染表格，当配置式不能满足需求时，。需要使用自定义插槽模板来自定义业务需求，实现更灵活的功能。vxe-grid 支持多种自定义方式，可以使用插槽模板，也可以使用插槽来自定义模板。自定义单元格模板 <template> <div> <vxe-grid v-bind="gridOptions"> <template #imgUrl_default="{ row }"> <vxe-image :src="row.imgUrl" width="36" height="30"></vxe-image> </template> <template #name_default="{ row }"> <vxe-button mode="text" @click="openDetail(row)">点击{{ row.name }}</vxe-button> </template> <template #sex_default="{ row }"> <span>{{ formatSex(row) }}</span> </template> <template #address_default="{ row }"> <vxe-image src="https://vxeui.com/resource/img/546.gif" width="36" height="30"></vxe-image> <span>{{ row.address }}</span> <vxe-image src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif" width="30" height="30"></vxe-image> </template> </vxe-grid> </div> </template> <script setup> import { reactive } from 'vue' import { VxeUI } from 'vxe-table' const gridOptions = reactive({ border: true, showOverflow: true, columns: [ { type: 'seq', width: 70 }, { field: 'imgUrl', title: 'imgUrl', slots: { default: 'imgUrl_default' } }, { field: 'name', title: 'Name', slots: { default: 'name_default' } }, { title: 'Group1', children: [ { field: 'sex', title: 'Sex', slots: { default: 'sex_default' } }, { field: 'num', title: 'Number' }, { field: 'age', title: 'Age' } ] }, { field: 'address', title: 'Address', width: 200, slots: { default: 'address_default' } } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, num: 234, imgUrl: 'https://vxeui.com/resource/img/fj577.jpg', address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, num: 34, imgUrl: 'https://vxeui.com/resource/img/fj581.jpeg', address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, num: 12, imgUrl: 'https://vxeui.com/resource/img/fj581.jpeg', address: 'Shanghai' } ] }) const formatSex = (row) => { return row.sex === '1' ? '男' : '女' } const openDetail = (row) => { VxeUI.modal.message({ status: 'success', content: `点击了${row.name}` }) } </script> 转载自https://www.cnblogs.com/qaz666/p/18561550

导出 HTML 文件 <template> <div> <vxe-button @click="exportEvent">直接导出 HTML 文件</vxe-button> <vxe-table show-footer ref="tableRef" :export-config="{}" :footer-data="footerData" :data="tableData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-colgroup title="分组1"> <vxe-column field="name" title="Name"></vxe-column> </vxe-colgroup> <vxe-colgroup title="分组2"> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="age" title="Age"></vxe-column> </vxe-colgroup> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' } ] const footerData = [ { seq: '合计', sex: '666', age: '999' } ] return { tableData, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.exportData({ type: 'html' }) } } } } </script> 转载自http://cnblogs.com/qaz666/p/18560845

导出时单元格类型默认是自动转换的，如果是需要字符串类型，可以通过 column.cell-type 设置 <template> <div> <vxe-button @click="exportEvent">直接导出 CSV 文件</vxe-button> <vxe-table show-footer ref="tableRef" :export-config="{}" :footer-data="footerData" :data="tableData"> <vxe-column field="seq" type="seq" width="70"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="no1" title="NO1"></vxe-column> <vxe-column field="no2" title="NO2" cell-type="string"></vxe-column> </vxe-table> </div> </template> <script> export default { data () { const tableData = [ { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', no1: '028', no2: '028' }, { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', no1: '220', no2: '220' }, { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', no1: '003200', no2: '003200' }, { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', no1: '02040', no2: '02040' } ] const footerData = [ { seq: '合计', sex: '666', age: '999' } ] return { tableData, footerData } }, methods: { exportEvent () { const $table = this.$refs.tableRef if ($table) { $table.exportData({ type: 'csv' }) } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560839

轻量级图表，超高性能的在表格中渲染柱状图，即使是渲染上万条数据单元格图表，也是丝滑流畅。npm install vxe-pc-ui@4.3.2 vxe-table@4.9.3 @vxe-ui/plugin-render-chart@4.0.1// ...import { VxeUI } from 'vxe-pc-ui'import VxeUIPluginRenderChart from '@vxe-ui/plugin-render-chart'import '@vxe-ui/plugin-render-chart/dist/style.css'// ...VxeUI.use(VxeUIPluginRenderChart)评分 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num41', title: '评分', width: 180, cellRender: { name: 'rate' } }, { field: 'num42', title: '评分 - 自定义颜色', width: 180, cellRender: { name: 'rate', props: { colors: ['#91C7AE', '#D48265'] } } } ], data: [ { id: 101, name: 'test1', num41: 1, num42: 4 }, { id: 102, name: 'test2', num41: 3, num42: 0 }, { id: 103, name: 'test3', num41: 1, num42: 1 }, { id: 104, name: 'test4', num41: 3, num42: 4 }, { id: 105, name: 'test5', num41: 1, num42: 3 }, { id: 106, name: 'test6', num41: 3, num42: 3 }, { id: 107, name: 'test7', num41: 2, num42: 1 }, { id: 108, name: 'test8', num41: 0, num42: 4 }, { id: 109, name: 'test9', num41: 1, num42: 2 }, { id: 1010, name: 'test10', num41: 4, num42: 2 } ] } } } } </script> 柱状图 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num10', title: '柱状图', width: 200, cellRender: { name: 'bar', props: { bar: { max: 100 }, label: { formatter: '{value}%' } } } }, { field: 'num11', title: '柱状图 - 显示值', width: 200, cellRender: { name: 'bar', props: { label: { formatter: '{value}' } } } }, { field: 'num12', title: '柱状图 - 最大值', width: 200, cellRender: { name: 'bar', props: { bar: { max: 140 }, colors: ['#FFDB5C', '#91C7AE', '#D48265'], tooltip: { formatter: '值：{value}%' }, label: { formatter: '{value}%' } } } } ], data: [ { id: 101, name: 'test1', num10: [60], num11: [60, 111], num12: [60, 134, 76] }, { id: 102, name: 'test2', num10: [85], num11: [33, 25], num12: [42, 73, 22] }, { id: 103, name: 'test3', num10: [45], num11: [60, 104], num12: [6, 64, 44] }, { id: 104, name: 'test4', num10: [88], num11: [76, 99], num12: [41, 81, 77] }, { id: 105, name: 'test5', num10: [72], num11: [27, 157], num12: [48, 101, 76] }, { id: 106, name: 'test6', num10: [50], num11: [8, 111], num12: [60, 5, 19] }, { id: 107, name: 'test7', num10: [16], num11: [60, 6], num12: [9, 57, 34] }, { id: 108, name: 'test8', num10: [24], num11: [23, 68], num12: [35, 111, 80] }, { id: 109, name: 'test9', num10: [100], num11: [14, 66], num12: [27, 34, 98] }, { id: 1010, name: 'test10', num10: [98], num11: [44, 98], num12: [29, 107, 127] } ] } } } } </script>  饼图 <template> <div> <vxe-grid v-bind="gridOptions"></vxe-grid> </div> </template> <script> export default { data () { return { gridOptions: { border: true, showOverflow: true, height: 500, columnConfig: { resizable: true }, columns: [ { type: 'seq', width: 70 }, { field: 'name', title: 'Name' }, { field: 'num20', title: '饼图 - 环形', width: 100, cellRender: { name: 'pie', props: { ring: { diameter: '60%' } } } }, { field: 'num21', title: '饼图 - 自定义环形', width: 140, cellRender: { name: 'pie', props: { colors: ['#FFDB5C', '#F0F0F0'], ring: { diameter: '60%' }, label: { formatter: '{value[0]}%' } } } }, { field: 'num23', title: '饼图 - 实心', width: 100, cellRender: { name: 'pie' } }, { field: 'num30', title: '饼图 - 自定义实心', width: 140, cellRender: { name: 'pie', props: { colors: ['#FFDB5C', '#91C7AE', '#D48265'], ring: { diameter: '60%', color: '#2F4554' }, label: { color: '#ffffff', formatter: '概况' } } } }, { field: 'num31', title: '多种混合', width: 200, cellRender: { name: 'pies', children: [ { props: { tooltip: { formatter: '值：{value}' }, colors: ['#FFDB5C', '#D48265'], ring: { diameter: '60%' } } }, { props: { tooltip: { formatter: '值：{value}' } } }, { props: { tooltip: { formatter: '值：{value}' } } } ] } } ], data: [ { id: 101, name: 'test1', num20: [30, 70], num21: [30, 70], num30: [47, 67, 67], num31: [[60, 28, 26], [77, 100], [77, 100, 8, 55, 100, 77, 142]], num23: [20, 30, 50] }, { id: 102, name: 'test2', num20: [50, 50], num21: [60, 40], num30: [60, 83, 33], num31: [[28, 60, 32], [88, 40], [22, 100, 9, 55, 111, 86, 100]], num23: [200, 400, 500] }, { id: 103, name: 'test3', num20: [33, 67], num21: [27, 78], num30: [84, 11, 14], num31: [[100, 17, 39], [100, 220], [7, 100, 11, 77, 105, 77, 100]], num23: [10, 80, 10] }, { id: 104, name: 'test4', num20: [11, 89], num21: [50, 50], num30: [25, 71, 67], num31: [[19, 76, 99], [77, 702], [33, 100, 77, 66, 174, 69, 100]], num23: [80, 10, 10] }, { id: 105, name: 'test5', num20: [19, 81], num21: [67, 33], num30: [100, 29, 55], num31: [[35, 63, 100], [53, 8], [77, 100, 66, 33, 100, 97, 100]], num23: [18, 30, 26] }, { id: 106, name: 'test6', num20: [16, 84], num21: [17, 83], num30: [66, 100, 67], num31: [[13, 57, 60], [330, 546], [11, 100, 58, 72, 100, 178, 100]], num23: [14, 33, 26] }, { id: 107, name: 'test7', num20: [98, 2], num21: [86, 14], num30: [60, 9, 5], num31: [[60, 40, 0], [120, 100], [22, 100, 77, 44, 10, 77, 198]], num23: [20, 5, 15] }, { id: 108, name: 'test8', num20: [63, 37], num21: [99, 1], num30: [55, 76, 67], num31: [[46, 71, 83], [77, 100], [77, 100, 65, 97, 9, 59, 100]], num23: [10, 20, 30, 40] }, { id: 109, name: 'test9', num20: [48, 52], num21: [8, 92], num30: [97, 60, 41], num31: [[55, 33, 53], [747, 52], [73, 100, 78, 81, 100, 77, 174]], num23: [14, 20, 36] }, { id: 1010, name: 'test10', num20: [72, 28], num21: [22, 78], num30: [17, 10, 31], num31: [[77, 100, 58], [75, 85], [14, 250, 59, 44, 16, 50, 100]], num23: [200, 400, 500] } ] } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560825

在 vxe-table 中，使用 echarts 实现表格通过右键菜单渲染折线图、饼图、柱状图等，通过扩展插件就能实现简单的配置渲染单元格图表 <template> <div> <vxe-grid v-bind="gridOptions" @menu-click="menuClickEvent"> </vxe-grid> </div> </template> <script> export default { data () { const gridOptions = { border: true, height: 500, showOverflow: true, columnConfig: { resizable: true }, editConfig: { mode: 'cell', trigger: 'dblclick' }, mouseConfig: { area: true // 是否开启区域选取 }, keyboardConfig: { isArrow: true, isShift: true, isTab: true, isEnter: true, isEdit: true, isDel: true, isEsc: true, isFNR: true // 是否开启查找与替换 }, menuConfig: { body: { options: [ [ { code: 'myCode', name: '自定义的菜单' } ], // vxe-table-plugin-charts 之后可以直接使用内置 code，也可以自行实现 [ { name: '创建图表', children: [ { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-x' }, { code: 'CHART_BAR_X_AXIS', name: '横向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-x', params: { category: 'name' } }, { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 自由选择', prefixIcon: 'vxe-icon-chart-bar-y' }, { code: 'CHART_BAR_Y_AXIS', name: '纵向柱状图 - 固定类别', prefixIcon: 'vxe-icon-chart-bar-y', params: { category: 'name' } }, { code: 'CHART_LINE', name: '折线图 - 自由选择', prefixIcon: 'vxe-icon-chart-line' }, { code: 'CHART_LINE', name: '折线图 - 固定类别', prefixIcon: 'vxe-icon-chart-line', params: { category: 'name' } }, { code: 'CHART_PIE', name: '饼图 - 自由选择', prefixIcon: 'vxe-icon-chart-pie' }, { code: 'CHART_PIE', name: '饼图 - 固定类别', prefixIcon: 'vxe-icon-chart-pie', params: { category: 'name' } } ] } ] ] } }, columns: [ { type: 'seq', width: 60 }, { field: 'name', title: 'name', editRender: { name: 'input' } }, { field: 'num1', title: 'Sum', editRender: { name: 'input' } }, { field: 'num2', title: 'Plan', editRender: { name: 'input' } }, { field: 'num3', title: 'Complete', editRender: { name: 'input' } }, { field: 'num4', title: 'Unfinished', editRender: { name: 'input' } }, { field: 'num5', title: 'Success', editRender: { name: 'input' } }, { field: 'num6', title: 'Error', editRender: { name: 'input' } } ], data: [ { id: 10001, name: 'Test1', role: 'Develop', num1: 4, num2: 45, num3: 77, num4: 42, num5: 23, num6: 67 }, { id: 10002, name: 'Test2', role: 'Test', num1: 23, num2: 52, num3: 23, num4: 45, num5: 78, num6: 23 }, { id: 10003, name: 'Test3', role: 'PM', num1: 22, num2: 41, num3: 88, num4: 12, num5: 23, num6: 23 }, { id: 10004, name: 'Test4', role: 'Designer', num1: 3, num2: 66, num3: 23, num4: 16, num5: 11, num6: 23 }, { id: 10005, name: 'Test5', role: 'Designer', num1: 23, num2: 76, num3: 12, num4: 23, num5: 34, num6: 78 }, { id: 10006, name: 'Test6', role: 'Designer', num1: 7, num2: 45, num3: 23, num4: 5, num5: 15, num6: 32 }, { id: 10007, name: 'Test7', role: 'Test', num1: 87, num2: 9, num3: 6, num4: 44, num5: 23, num6: 44 }, { id: 10008, name: 'Test8', role: 'PM', num1: 23, num2: 23, num3: 55, num4: 45, num5: 80, num6: 33 }, { id: 10009, name: 'Test9', role: 'Designer', num1: 8, num2: 90, num3: 8, num4: 4, num5: 23, num6: 50 }, { id: 10010, name: 'Test10', role: 'Test', num1: 88, num2: 23, num3: 2, num4: 23, num5: 18, num6: 23 } ] } return { gridOptions } }, methods: { menuClickEvent ({ menu }) { switch (menu.code) { case 'myCode': alert('自定义菜单') break } } } } </script> 转载自https://www.cnblogs.com/qaz666/p/18560807