后台管理项目的小功能在开发过程中，经常要对数据内容进行格式化处理，尤其是pc端，搭配elementUI进行页面开发，可以

1.如何使用element表格的formatter属性来格式化内容

在开发过程中，经常要对数据内容进行格式化处理，尤其是pc端，搭配elementUI进行页面开发，可以使用formatter这个属性来进行格式化。

比如在后台的项目开发过程中，要对员工的聘用形式进行格式化。后台返回的而数据为1或者2

根据枚举的文件可以看出这些数字表示的意义,如果只是简单的两种情况，有很多便捷的方式去实现功能，但是我们如果涉及到很多的数据呢，这个时候就需要更好的处理方法。

  // 聘用形式
  hireType: [
    {
      id: 1,
      value: '正式'
    },
    {
      id: 2,
      value: '非正式'
    }
  ]

属性	作用	用法
formatter	用来格式化内容	Function(row, column, cellValue, index)

具体实现

  import  EmployeeEnum from '@/api/constant/employees'
 <!-- 格式化聘用形式 -->
    <el-table-column label="聘用形式" sortable :formatter="formatEmployment" />
   // 格式化聘用形式
    formatEmployment(row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = EmployeeEnum.hireType.find(item => item.id === cellValue)
      return obj ? obj.value : '未知'
    }

2.在vue中如何注册自己的插件

1.在main.js中进行注册

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

2.在`src下的compoments`创建

路径src\components\index.js

// 全局注册组件
import PageTools from './PageTools' //引入全局组件文件路径
export default {
  install(Vue) {
    // 注册全局的通用组件对象
    Vue.component('PageTools', PageTools) //进行注册
  }
}

3.验证或者清除表单验证规则

验证表单规则
 await this.$refs.form.validate()
清空表单规则
this.$refs.form.resetFields()

4.Select 选择器的使用

  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label" //显示进行选择的
      :value="item.value" //发送给后台的数据
	>
    </el-option>
  </el-select>

后台管理项目的小功能