前端——》vue框架之使用vuetify组件库

最新推荐文章于 2024-04-30 16:43:39 发布

Mr_xujiee

最新推荐文章于 2024-04-30 16:43:39 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： vuetify和element element和vuetify vuetify框架的使用 vuetify表格 vuetify时间选择器的实现

本文链接：https://blog.csdn.net/nienianzhi1744/article/details/115733899

版权

使用心得

按照老习惯，先看效果图

效果图

首页

在这里插入图片描述

列表页面

在这里插入图片描述

弹出层

在这里插入图片描述

一点点心得

上面这个效果图就是使用vuetify框架来实现的，因为大部分的管理系统都是左侧有竖向的菜单栏，顶部有导航栏，所以这样的风格乍一看还有点小清新。这也是用这个框架的原因之一。
之前用vue写前端基本都用的是element框架，这次换成vuetify框架的原因之一是vuetify框架能够更好的支持页面的自定义布局，能够不用写什么css样式就能达到很好的效果。

知识点总结

表格与单元格

表格效果图如上所示。这里介绍一下vuetify框架和element框架在表格上的一些差异：
首先来看一段element实现表格的代码：

element表格实现代码

<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="输入名称" class="handle-input mr10"></el-input>
                <el-input v-model="query.code" placeholder="输入code" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch"  class="tableHeadOption">搜索</el-button>
                <el-button type="primary" icon="el-icon-circle-plus" @click="handleAdd()"  class="tableHeadOption">添加</el-button>
            </div>
            <el-table :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="companyName" label="客户全称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="shortName" label="客户简称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="companyCode" label="客户代码" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column label="操作" width="