Vue3整合VxeTable

淩亂°似流年 2023-01-21 13:23 81阅读 0赞

VxeTable官网：[https://gitee.com/xuliangzhan\_admin/vxe-table][https_gitee.com_xuliangzhan_admin_vxe-table]

## 安装 ##

> npm install xe-utils vxe-table@next

## main.ts中注册 ##

import { createApp} from 'vue'
    //vxe-table
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/style.css'
    
    const app = createApp(App)
    app.use(VXETable)
    app.mount('#app')

## 页面使用 ##

<template>
      <div>
        <vxe-table border="inner" :data="tableData">
          <vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
          <vxe-table-column field="name" title="姓名"></vxe-table-column>
          <vxe-table-column field="sex" title="性别"></vxe-table-column>
          <vxe-table-column field="address" title="籍贯"></vxe-table-column>
        </vxe-table>
      </div>
    </template>
    
    <script> import { ref} from 'vue' export default { name: "Home", data() { let tableData = ref( [ { id: 10001, name: "张三", sex: "男", address: "北京市" }, { id: 10002, name: "李四", sex: "女", address: "上海市" }, { id: 10003, name: "王五", sex: "男", address: "广州市" } ]) return { tableData }; } }; </script>

## 页面效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]

[https_gitee.com_xuliangzhan_admin_vxe-table]: https://gitee.com/xuliangzhan_admin/vxe-table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpYW5naGVjYWk1MjE3MTMxNA_size_16_color_FFFFFF_t_70]: /images/20221020/f35adc39b3aa41c3866edd3eb5de38b3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 vxetable 如何删除checkbox选择的行

在 vxetable 中删除 checkbox 选择的行，你可以像下面这样做： 1. 在 vxetable 组件的模板中，添加一个删除按钮，并绑定一个删除方法。 2. 在

向右看齐/ 2024年03月25日 09:18/ 0 赞/ 110 阅读

相关 springboot3整合ehcache3

在springboot3.x版本中，缓存管理的相关标签有所改动，[官方文档][Link 1]中对于支持缓存提供者的部分示例如下，不再有一个ehcache标签指定ehcache，

桃扇骨/ 2024年03月23日 12:05/ 0 赞/ 109 阅读

相关 springboot整合vue

步骤 1. 创建springboot项目 2. 在resources目录下新建一个vue目录 3. 在vue目录下新建vue项目，或者把存在的vue项目copy到这

淡淡的烟草味﹌/ 2023年07月09日 05:22/ 0 赞/ 30 阅读

相关 Vue3整合VxeTable

VxeTable官网：[https://gitee.com/xuliangzhan\_admin/vxe-table][https_gitee.com_xuliangzhan_

淩亂°似流年/ 2023年01月21日 13:23/ 0 赞/ 82 阅读

相关 Vue3整合Markdown-it

效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

本是古典何须时尚/ 2023年01月19日 11:58/ 0 赞/ 26 阅读

相关 vxetable实现前端分页

直接上代码吧 <template> <div> <page-wraper> <a-modal

谁借莪１个温暖的怀抱￠/ 2023年01月13日 10:50/ 0 赞/ 238 阅读

相关 vue3.0 + Element Plus整合实战

mall-vue3-manage 基于vue3.0 + Element Plus、整合最新的 Echarts5 强劲的渲染引擎、富文本编辑器 Wangeditor 的后

た入场券/ 2022年10月28日 03:46/ 0 赞/ 214 阅读

相关 Vue2+VueRouter3+Webpack3.6+Axios项目实战----vueRouter3整合进项目（四）

项目采用的是VueRouter3.0.1作为路由。下面对vueRouter的配置进行一个详细的记录第一步：定义了2个路由路径，一个是系统首页另外一个是系统登录界面文件

喜欢ヅ旅行/ 2022年05月19日 23:29/ 0 赞/ 283 阅读

相关 MybatisPlus3整合

Mybatis-Plus简介 Mybatis-Plus 是一款 Mybatis 动态 SQL 自动注入 Mybatis 增删改查 CRUD 操作中间件，减少你的开发周期

ゞ浴缸里的玫瑰/ 2022年04月06日 05:56/ 0 赞/ 393 阅读

相关 15、Vue CLI 3+tinymce 5富文本编辑器整合

富文本编辑器里大佬们都说tinymce NB！插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话，直接通过组件配置

本是古典何须时尚/ 2021年11月26日 12:08/ 0 赞/ 424 阅读