Vue3整合VxeTable

淩亂°似流年 2023-01-21 13:23 32阅读 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 条评论，32人围观）

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

相关阅读

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

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

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

相关 springboot3整合ehcache3

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

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

相关 Vue3整合VxeTable

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

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

相关 vxetable实现前端分页

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

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

相关 SpringBoot+Mybatis+Vue整合

创建springboot项目 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

心已赠人/ 2022年12月08日 05:33/ 0 赞/ 288 阅读

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

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

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

相关 Spring Cloud整合Vue

由于公司项目是前后端分离的，我前段时间将后端的Spring Cloud框架搭建的差不多了，包括Eureka服务发现中心，远端配置中心Config，不同服务接口调用组件Feign

川长思鸟来/ 2022年04月15日 01:58/ 0 赞/ 216 阅读

相关 MybatisPlus3整合

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

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

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

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

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

相关 vue整合外部js

vue引入外部js import \{ TrackLine \} from "../../../../../static/js/trajectory.js"; impo

旧城等待，/ 2021年11月02日 09:28/ 0 赞/ 342 阅读