前端基础(Element、vxe-table组件库的使用)

这篇具有很好参考价值的文章主要介绍了前端基础(Element、vxe-table组件库的使用)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:在前端项目中,实际上,会用到组件库里的很多组件,本博客主要介绍Element、vxe-table这两个组件如何使用。

目录

Element

引入element

使用组件的步骤

使用对话框的示例代码

效果展示 

vxe-table

引入vxe-table

成果展示

总结


Element

官网地址

Button 按钮 | Element Plus (element-plus.org)

引入element

在main.ts文件中引入element组件库

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from "element-plus/es/locale/lang/zh-cn"
createApp(App).use(ElementPlus,{locale:zhCn}).mount('#app')

使用组件的步骤

  1. 选用组件
  2. 查看代码,查看API
  3. 使用代码,替换值

使用对话框的示例代码

<template>
  <el-button text @click="isShow = true"> 测试按钮 </el-button>

  <el-dialog v-model="isShow" title="对话框" width="30%" :before-close="isShow">
    <span>Mrjj测试</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="isShow = false"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>


<script setup>
import { ref } from 'vue'
let isShow = ref(false)
</script>

<style lang="scss" scoped>
</style>

效果展示 

vxe-table,前端技术,前端

vxe-table

官网地址

vxe-table v4 (vxetable.cn)

引入vxe-table

与Element组件库一样,首先需要在main.ts文件中引入vxe-table组件库 

import VXETable from "vxe-table";
import 'vxe-table/lib/style.css'
createApp(App).use(VXETable).mount("#app");

与上面使用Element组件库里的组件一样,找到想用的组件,拿到代码模板后,在模板里修改,填值,此处不再赘述。

成果展示

vxe-table,前端技术,前端

vxe-table,前端技术,前端 

总结

前端基础学到这个阶段,已经可以尝试自己去做一些小的需求了,组件库的使用非常方便,在使用组件库方面要多加练习,写一个form表单,练习添加、修改、删除等功能,还可以进行多方面的扩展,感兴趣的可以深入学习,多加练习! 文章来源地址https://www.toymoban.com/news/detail-686261.html

到了这里,关于前端基础(Element、vxe-table组件库的使用)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用ElementUI的el-tab+vxe-table表格+复选框选择

    效果: 功能:首先进来是全部清空的状态的 点击左边选择不同项右边会实时发送接口获取数据填充表格 复选的内容可以保留显示,比如A的1勾选后切换到B再切换回来A的1仍然是勾选状态 说实话官网的setCheckboxRow方法我实现不了,这里就是纯蠢蠢的办法实现,在这里做个记录

    2024年01月17日
    浏览(51)
  • vxe-table中树形结构

    如图,同事让帮忙实现一个需求  从二级树节点开始,同时选中的只能有一个二级树节点,选中的二级树节点之下的子节点都可以被选中。否则不能被选中 直接上代码 需要注意的是,文中树状图传递的数据是打平的数据,设置代码是下图,而不是树状图!!  上述的这一点非常

    2024年02月10日
    浏览(42)
  • 关于vxe-table全局引入的问题

    主要讲解一下vxe-table全局引入然后使用碰到的问题 0:vxe-table的官网地址 1:基本环境 (1):vue版本为3.x以上(我的是3.2.13) (2): 依赖库:xe-utils 注意:这篇博客的是vue3的脚手架搭建的,如果需要看低版本,请点击这里 2:使用npm安装 3:package.json文件里面就会有以下内

    2024年02月11日
    浏览(38)
  • vxe-table实现表格行拖拽

    1.插件文档 vex-table:https://vxetable.cn/v3/#/table/base/basic sortablejs: http://www.sortablejs.com/ 2.引入插件 vxe-table: sortablejs: 3.核心拖拽函数 渲染问题解决方法链接:sortablejs拖拽列表渲染问题 4.全代码 全代码

    2024年02月16日
    浏览(45)
  • vxe-table 表格多选框回显

    1.弹框表格结构   a-modal               v-if=\\\"visibleQuality\\\"               title=\\\"请选择需要提高的能力素质要求\\\"               :maskClosable=\\\"false\\\"               :visible=\\\"visibleQuality switchStatus\\\"               @ok=\\\"handleOkQuality\\\"               @cancel=\\\"handleCancelQuality\\\"            

    2024年02月06日
    浏览(39)
  • vxe-table表格合并单元格和编辑

    //这是在vue上面引用vxe-table插件实现的,主要方法都设置在table中,mergeCells,tableData都是在vue页面的data初使化数据, :footer-method=“footerMethod”:尾部数据,:merge-footer-items=“mergeCells”:尾部合并单元格。vxe-table网址:https://vxetable.cn/#/table/advanced/footerSpan

    2023年04月09日
    浏览(43)
  • vue表格插件vxe-table导出 excel

    vxe-table 默认支持导出 CSV、HTML、XML、TXT格式的文件,不支持 xlsx 文件 要想导出 xlsx 文件,需要使用 vxe-table-plugin-export-xlsx 依赖  参考:https://cnpmjs.org/package/vxe-table-plugin-export-xlsx/v/2.1.0-beta 1.安装  例子: 如果用最新版的,依赖,这样使用就会报错 Uncaught (in promise) 亲测2.2.2版

    2024年01月22日
    浏览(47)
  • Vue3 vxe-table 手写鼠标区域选中

    参考原文地址:vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]-CSDN博客 准备vxe-talbe@4.5.7,Vue@3.3.4,在原作者的基础上进行了修改,修改后和官网几乎无差别,允许左右侧固定列选中,允许任意范围选中,但是键盘监听功能没添加//感觉没啥软用.... 先看效果: 正常鼠标从左上往右下

    2024年02月05日
    浏览(53)
  • vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作

    该功能存在bug哦,移步我的新博客:vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]_wanghanlu_的博客-CSDN博客 在看vxe-table 文档时,发现一个功能,鼠标区域选中,觉得这个功能很好。  但是仔细发现,这个功能不是免费的。我就想想,为啥不能自己实现呢。 下面给你看看我的最终

    2024年02月15日
    浏览(39)
  • vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]

    前几天写了一个关于 vxe-table 鼠标滑动选择多行 的博客,在项目上线的过程中,发现这个功能还是有点bug,在经过我对vxe-table pro版本 的演示后vxe-table PRO,认真调试后,终于解决了bug,并且这个功能和pro版本可以说是几乎一模一样。注意:我是说这个滑动选择的功能,不是说是

    2024年02月05日
    浏览(149)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包