vue技巧

.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)
  }
}

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

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

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

作用域插槽+过滤器

作用域插槽取出object

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

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

v-slot

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

② 解构row

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

加上过滤

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

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

在里面使用过滤器的方法

 <el-table-column label="入职时间" sortable="" align="center">
            <!-- 作用域插槽 -->
            <template slot-scope="{ row }">{{ row.timeOfEntry | formatDate }}</template>
       </el-table-column>

弹出框制作

    <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>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <!-- el-row里面写slot="fotter"表示放到底部   第二种方法就是用template v-slot:fotter -->
      <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>

点击之后路由跳转

利用**$router.push()**

直接将路由中的参数给data属性

this.$route.params.id

表单的制作

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" size="small">添加权限</el-button>
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-table border>
        <el-table-column align="center" label="名称" />
        <el-table-column align="center" label="标识" />
        <el-table-column align="center" label="描述" />
        <el-table-column align="center" label="操作">
          <template>
            <el-button type="text">添加</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>