关于二次封装element组件的一种方式

      翻出了前几年的一个项目，在element-admin的基础上添加了离线缓存开关和二次封装element-table的功能，因项目要求所有功能table的功能比较多，例如编辑列、多条件检索、固定列、列缓存、选单行，多行，操作栏弹窗等，所以需要二次封装element-table，感觉当时的admin框架功能都比较多，想自己做一个较为纯净的东西，关于离线缓存部分可以参考：关于vue前端离线（无接口）场景下开发或展示_运动程序员的博客-CSDN博客，这里简述二次封装element的大概方式，感兴趣的话具体可以看代码，源码地址我放在了最后：

一、借助vuex存取table组件的配置

1、先构造table展示的json格式数据，我存放到了store下的cacheData文件夹：

 

 2、element-admin已安装了vuex依赖，并在入口引用了，src\store下新建一个js文件作为对table组件的一个详细配置其中包括数据表格、表格右侧的操作栏、顶部的工具栏的配置，添加代码：

import studentCacheData from '../cacheData/studentList.json'
import settings from './settings'
const student = {
    state:{
        //测试数据
        cacheData:studentCacheData,
        //是否有操作栏
        isBar:true,
        isBarShow:false,
/*         数据表格配置
        key:表头字段名
        label:显示信息
        width:列宽度
        fixed：固定列属性
        type：搜索控件属性
        search：是否加入搜索条件
        selectOption 下拉菜单哪个状态里的数据
        searchValue：搜索控件输入的值
        searchKey:对应接口入参的key */
        tableOption:[
            {key:"studentId",label:"编号",width:"",fixed:"left",type:"text",search:false,requestKey:"",searchValue:""},
            {key:"nickName",label:"姓名",width:"",fixed:"left",type:"text",search:true,selectOptionValue:"",requestKey:"userName",searchValue:""},
            {key:"schoolName",label:"所属机构",width:"",fixed:"left",type:"select",search:true,selectOption:"school",selectOptionValue:settings.sexData,requestKey:"schoolName",searchValue:""},
            {key:"phonenumber",label:"手机号码",width:"",fixed:false,type:"text",search:false,requestKey:"phonenumber",searchValue:""},
            {key:"address",label:"地址",width:"500",fixed:false,type:"text",search:true,requestKey:"",searchValue:""},
            {key:"idCardNo",label:"身份证号",width:"200",fixed:false,type:"text",search:true,requestKey:"",searchValue:""},
        ],
        //表格操作栏配置
        tableBarOption:[
            {label:"查看资料",type:"select",business:"",icon:"el-icon-tickets"},
            {label:"完善资料",type:"edit",business:"business:student:edit",icon:"el-icon-tickets"},
            {label:"删除",type:"remove",business:"business:student:remove",icon:"el-icon-delete"},
        ],
        //表格工具栏配置
        tableButtonOption:[
            {label:"导入",type:"import",business:"business:student:import",icon:"el-icon-upload2"},
            {label:"导出",type:"export",business:"business:student:export",icon:"el-icon-download"},
            {label:"新增",type:"add",business:"business:student:addStudent",icon:"el-icon-plus"},
        ],
        //用户编辑列保存的数据
        tableOptionSave:[],
/*         表单配置
        key:表头字段名
        label:显示信息
        width:控件宽度
        fixed：固定列属性
        type：控件属性
        state：是否显示
        value：控件输入的值
        selectOption 下拉菜单哪个状态里的数据 */
        formOption:[
            {key:"studentId",label:"编号",width:"",type:"text",state:false,value:"",required: false,requestKey:""},
            {key:"userName",label:"姓名",width:"",type:"text",state:true,value:"",required: true, message: "请输入姓名", trigger: "blur",requestKey:"nickName"},
            {key:"sex",text:"",label:"性别",width:"",type:"radio",state:false,selectOption:"",value:"",selectOptionValue:"",required: true, message: "请选择性别", trigger: "blur",requestKey:"sex"},
            {key:"school",text:"",label:"所属机构",width:"",type:"select",state:true,selectOption:"school",selectOptionValue:"",value:"",required: true, message: "请选择学校", trigger: "change",requestKey:"school"},
            {key:"phonenumber",label:"手机号码",width:"",type:"text",state:true,value:"",required: true, message: "请输入手机号", trigger: "blur",requestKey:"phoneNo"},
            {key:"idCardNo",label:"身份证号",width:"200",type:"text",state:true,value:"",required: true, message: "请输入身份证号", trigger: "blur",requestKey:"idCardNo"},
            {key:"address",label:"籍贯",width:"200",type:"text",state:true,value:"",required: true, message: "请输入籍贯", trigger: "blur",requestKey:"address"},
            {key:"uploadType",label:"上传类型",width:"200",type:"text",state:false,value:"3",required: false,requestKey:"uploadType"},
            {key:"timestamp",label:"身份证上传时间",width:"200",type:"text",state:false,value:"",required: false,requestKey:"timestamp"},
            // {key:"avatar",label:"头像",width:"200",type:"text",state:true,value:"",required: true, message: "请上传头像", trigger: "blur"},
            // {key:"avatar",label:"头像",width:"200",type:"text",state:true,value:"",required: true, message: "请上传头像", trigger: "blur"},
            // {key:"avatar",label:"头像",width:"200",type:"text",state:true,value:"",required: true, message: "请上传头像", trigger: "blur"},
        ],

    },
    mutations: {
        //添加删除编辑列保存的数据
        setTableOptionSave:(state, saveKey) =>{
            state.tableOptionSave=saveKey
        }
    }
}
export default student

二、封装table组件

1、构建组件

4、与构建的组件同级目录下添加组件install文件index.js：

import UnkTable from './table'
import UnkForm from './form'
export default {
  install: (Vue) => {
    Vue.component('unk-table', UnkTable)
    Vue.component('unk-form', UnkForm)
  }
}

三、在main.js入口文件添加组件库的调用

import unkComponentConfig from './components/unk-components/index.js'
Vue.use(unkComponentConfig)

四、父组件调用组件,粗略的代码如下，主要表达实现思路。

import { getstudentslist, downloadfile } from "unkApi/system/parmanagement";
import { getschoollist, getclasslist } from "unkApi/system/class";
export default {
  data() {
    return {
      unkForm: {
        formOption: [],
        requestOption: {},
        rules:[]
      },
      unkTable: {
        total: 0,
        tableData: [],
        tableOption: [],
        searchData: [],
        tableOptionSave: [],
        //操作栏配置参数
        tableBarOption: [],
        //工具栏配置参数
        tableButtonOption: [],
        isBar: false,
        isBarShow: false,
        //搜索区域
        tableLoadOption: {
          pageNum: 1,
          pageSize: 10,
          status: "",
          schoolName: "",
          className: "",
          userName: "", //名称
          phonenumber: "", //手机号
          idCardNo: "", //身份证号
          statusval: "",
          deptId: "",
          classId: ""
        }
      },
    };
  },

  methods: {
    //获取学校id
    getschoolid(id) {
      console.log(id);
      this.tableLoadData.schoolId = id;
      getclasslist(this.tableLoadData).then((res) => {
        console.log(res);
        this.classlist = res;
      });
    },
    //加载表格数据和配置
    tableLoad(tableLoadOption) {
      let _this = this;
      getstudentslist(tableLoadOption).then((response) => {
        console.log(response);
        //传递给table公共组件数据
        _this.unkTable.tableData = response.rows;
        //传递给table公共组件表格配置
        _this.unkTable.tableOption = _this.$store.state.student.tableOption
        //如果是第一次加载页面
        if (_this.unkTable.searchData.length == 0) {
          //传递给table公共组件需要搜索的表格配置
          _this.unkTable.tableOption.forEach((item, index) => {
            if (item.search == true) {
              _this.unkTable.searchData.push(item)
            }
          })
          //遍历传递给table公共组件需要搜索的下拉菜单的数据
          _this.unkTable.searchData.forEach((item, index) => {
            if (item.type == "select") {
              if(item.selectOption!=undefined && item.selectOption!= null && item.selectOption!=""){
                item.selectOptionValue = _this.$store.state[item.selectOption].cacheData.rows
              }
            }
          })
        }
        //如果用户还没有编辑过列
        if (_this.$store.state.student.tableOptionSave.length == 0) {
          //传递给table公共组件表格的配置 全部显示
          _this.unkTable.tableOptionSave = _this.$store.state.student.tableOption
        } else {
          //传递给table公共组件上次的配置 显示上次配置
          _this.unkTable.tableOptionSave = _this.$store.state.student.saveKeyValue
        }
        //传递给table公共组件表格数据条数
        _this.unkTable.total = response.total
        //是否展示操作栏
        _this.unkTable.isBar = _this.$store.state.student.isBar
        //操作栏
        _this.unkTable.tableBarOption = _this.$store.state.student.tableBarOption
        //工具栏
        _this.unkTable.tableButtonOption = _this.$store.state.student.tableButtonOption
        //数据传递完才加载table公共组件
        this.flag = true
        //加载form
        _this.$store.state.student.formOption.forEach((item, index) => {
          if (item.state) {
            _this.unkForm.formOption.push(item)
            _this.unkForm.rules.push({
              [item.key]:[
                {
                  required:item.required,
                  trigger: item.trigger
                }
              ]
            })
          }
        })
        //遍历传递给form公共组件需要搜索的下拉菜单的数据
        _this.unkForm.formOption.forEach((item, index) => {
          if (item.type == "select") {
            item.selectOptionValue = _this.$store.state[item.selectOption].cacheData.rows
          }
        })
        this.formShow = true
      });
    },
  }
};

只是把大概的思路描述了一下，具体可参考源码：https://gitee.com/unklian/unk-element-admin-off-line