Vue3整合VxeTable

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

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

相关阅读

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

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

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

相关【Vue】疫情实时数据及地图 Vue + Echarts + vxeTable

本期内容使用 Vue + Echarts + vxeTable 搭建前端展示界面，接口请求示例是腾讯肺炎疫情实时动态页面中的开放接口知识基础如何在 Vue 中引入

一时失言乱红尘/ 2023年07月11日 08:41/ 0 赞/ 31 阅读

相关 springboot整合vue

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

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

相关 Vue3整合VxeTable

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

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

相关【精品】vue3 整合 mock.js

[mockjs官网][mockjs] 第一步：安装 > cnpm install mockjs --save 第二步：安装axios > cnpm instal

Myth丶恋晨/ 2023年01月21日 02:27/ 0 赞/ 15 阅读

相关 Vue3整合Markdown-it

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

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

相关 vxetable实现前端分页

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

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

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

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

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

相关 MybatisPlus3整合

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

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

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

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

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