vue技巧

发布时间：2024-11-07 08:14

.sync

.sync是v-model的升级版 v-model只能写一次
在这里插入图片描述

|| &&

在这里插入图片描述

v-model

在这里插入图片描述

native

在这里插入图片描述

el-card制作

在这里插入图片描述

分页布局

在这里插入图片描述

页码的数字实现

在这里插入图片描述

页码点击切换

在这里插入图片描述

插槽的使用

slot v-slot
在这里插入图片描述
v-slot slot-scope

组件统一注册

为了方便所有的页面都可以不用引用该组件，可以进行全局注册
提供注册入口 src/componets/index.js

// 该文件负责所有的公共的组件的全局注册 Vue.use import PageTools from './PageTools' // 直接导出一个对象 // 对象里面写一个install方法 // -->想用Vue.use()来注册组件他会调用install方法 // -->他会拿到Vue的全局对象 // -->install里面可以完成组件的注册 export default { install(Vue) { // 注册全局的通用栏组件对象 // 第一个是组件的名称第二个是组件对象 Vue.component('PageTools', PageTools) } } 1234567891011121314

在入口处进行注册 src/main.js

import Component from '@/components' Vue.use(Component) // 注册自己的插件 12

过滤器解决时间格式的处理

作用域插槽+过滤器

作用域插槽取出object

显示obj.row.timeOfEntry
①解构obj
slot-scope

<template slot-scope="obj"> {{ obj.row.timeOfEntry }} </template> 123

v-slot

<template v-slot="obj"> {{ obj.row.timeOfEntry }} </template> 123

② 解构row

<template v-slot="{ row }"> {{ row.timeOfEntry }} </template> 123 加上过滤

将方法转到相应的位置上
在main.js中将工具方法转化成过滤器

import * as filters from '@/filters' // 引入工具类 // 注册全局的过滤器 // fitters里都是方法名称所以对其进行循环 Object.keys(filters).forEach(key => { // 注册过滤器名字是key 值是fitters里面key所对应的函数 Vue.filter(key, filters[key]) }) 1234567

在里面使用过滤器的方法

<el-table-column label="入职时间" sortable="" align="center">  <template slot-scope="{ row }">{{ row.timeOfEntry | formatDate }}</template> </el-table-column> 1234

弹出框制作

在这里插入图片描述

<el-dialog title="新增员工" :visible="showDialog"> <el-form label-width="120px"> <el-form-item label="姓名"> <el-input style="width:50%" placeholder="请输入姓名"></el-input> </el-form-item> <el-form-item label="手机"> <el-input style="width:50%" placeholder="请输入手机号"></el-input> </el-form-item> <el-form-item label="入职时间"> <el-date-picker style="width:50%" placeholder="请选择入职时间" /> </el-form-item> <el-form-item label="聘用形式"> <el-select style="width:50%" placeholder="请选择" /> </el-form-item> <el-form-item label="工号"> <el-input style="width:50%" placeholder="请输入工号"></el-input> </el-form-item> <el-form-item label="部门"> <el-input style="width:50%" placeholder="请选择部门" /> </el-form-item> <el-form-item label="转正时间"> <el-date-picker style="width:50%" placeholder="请选择转正时间" /> </el-form-item> </el-form>  <template v-slot:footer>  <el-row type="flex" justify="center"> <el-col :span="6"> <el-button size="small">取消</el-button> <el-button type="primary" size="small">确定</el-button> </el-col> </el-row> </template> </el-dialog>

1234567891011121314151617181920212223242526272829303132333435