使用心得
按照老习惯,先看效果图
效果图
首页
列表页面
弹出层
一点点心得
上面这个效果图就是使用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="180" align="center">
<template slot-scope