基于Vue+elementUI深色主题表格组件

使用步骤

1. git地址

https://github.com/menglin1997/tables.git

2. 运行

npm run serve

3. 部署

npm run build

4. 项目截图

5. Demo

组件依赖包moment，所以记得先装包：

npm install moment --save

template中使用：

 <tables
      :contentKey="contentKey"
      :menu="menu"
      :btnOpt="btnOpt"
      :tableContent="tableContent"
      :tableHead="tableHead"
      @handleChange="handleChange"
    ></tables>

script中使用：

import tables from "@/components/ZUI/table";
components: {
	tables
},

data数据示例

    data() {
    return {
      tableHead: [
        "登录账号",
        "激活时间",
        "老师",
        "登陆账号",
        "管理员",
        "状态",
        "详情"
      ],
      // 表格中的内容key
      /**
       * 表格中的内容key
       * key 要显示在界面中的项目 必填
       * type接口返回的类型 必填
       * key2 type为object1时必填
       * key3 type为object2
       *
       */
      contentKey: [
        {
          key: "loginName",
          type: "string"
        },
        {
          key: "expireTime",
          type: "moment"
        },
        {
          key: "teacher",
          type: "array"
        },
        {
          key: "organInfoVo",
          type: "object1",
          key2: "sysName"
        },
        {
          key: "organInfoVo",
          type: "object2",
          key2: "userInfoVo",
          key3: "realName"
        },
        {
          key: "status",
          type: "tag",
          tagItem: [
            {
              type: "success",
              value: 1,
              text: "启用"
            },
            {
              type: "danger",
              value: 2,
              text: "禁用"
            }
          ]
        },
        {
          key: "",
          type: "btn",
          btnTxt: "详情",
          btnMethods: "checkDetail",
          methodParams: "我是详情",
          btnType: "text"
        }
      ],
      menu: {
        isShow: true,
        text: "可以变"
      },
      tableContent: [],
      /**
       * 操作栏按钮
       * name {string} 按钮文字
       * type {string} 按钮样式  需要element有该颜色
       * methods {string} 父组件方法
       * icon 是否显示图标 不填则不显示 需要element里面有此图标
       * methods后边的属性是事件 如果想要生效必须在组件中绑定和父组件中注册,如:handleChange
       * 每一个事件有两个参数 第一个是默认有的  第二个是使用者自己传递的  规定为methodParams
       */
      btnOpt: [
        {
          name: "编辑",
          methods: "handleChange",
          type: "primary",
          methodParams: {
            ref: "addOrUpdate",
            type: 1
          }
        },
        {
          name: "重启设备",
          methods: "handleReset",
          type: "success",
          methodParams: {}
        },
        {
          name: null,
          icon: "el-icon-delete",
          type: "danger",
          methods: "handleDel"
        }
      ]
    };
  },

接口返回数据示例,下方用到的也是此数据

"records":[
  {
    "id":"22",
    "loginName":"2e",
    "activateTime":"2",
    "organId":"125323123423917485058",
    "expireTime":"1590076800",
    "teacher":["美子老师","包包老师","木子老师"],
    "organInfoVo":{
      "address":"测试的地址",
      "sysName":"测试人员",
      "userInfoVo":{
        "userId":"125523463822108673",
        "realName":"代理商001",
        "contactPhone":"15975314785"
      }
    }
  },
  {
    "id":"2",
    "loginName":"2",
    "activateTime":"2",
    "organId":"1253231593917485058",
    "expireTime":"1590076800",
     "teacher":["美子老师","包包老师","木子老师"],
    "organInfoVo":{
      "address":"测试的地址",
      "sysName":"测试人员",
      "userInfoVo":{
        "userId":"1255039363822108673",
        "realName":"代理商001",
        "contactPhone":"15975314785"
      }
    }
  }
],

6. API属性介绍

属性名	类型	默认值	示例	解释
contentKey	Array	[]	6.1有该属性详细介绍	tbody展示内容，和tableHead顺序一一对应（下方6.1有该属性详细介绍）
tableHead	Array	[]	[“姓名”，“电话”，“出生日期”，“地址”]	表头文字内容，和contentKey顺序一一对应
sort	Object	{ isShow: false, text: "序号" }	{ isShow: false, text: "序号" }	isShow：是否在左侧显示序号默认false不显示，text：显示后表头文本内容，默认为【序号】
menu	Object	{ isShow: true, text: "操作" }	{ isShow: true, text: "操作" }	isShow：是否显示右侧操作栏默认true显示，text：显示后表头文本内容，默认为【操作】
tableContent	Array	[]	后台返回过来的内容	后台返回过来的内容
btnOpt	Array	[]	6.2有该属性详细介绍	显示在操作栏下方的按钮，下方6.2有具体介绍

6.1 contentKey介绍

tbody展示内容，和tableHead顺序一一对应

参数	类型	是否必填	参数值	示例	解释
key	String	true	根据接口返回参数变化，type属性值为btn时候可以填写空字符串 `''`	key: "name"	表头展示内容的key值，值对应的是接口返回数据的参数
type	String	true	`string` /`object1` / `object2` / `moment` /`tag` / `btn`	type: "string"	tobody中内容展示类型，具体见下方6.1.1介绍
key2	String	type值为`object1`/ `object2`时必填	根据接口返回参数变化	key2: "name"	表头展示内容的key值，值对应的是接口返回数据的参数，具体见下方6.1.1介绍
key3	String	type值为`object2`时必填	根据接口返回参数变化	key3: "name"	表头展示内容的key值，值对应的是接口返回数据的参数，具体见下方6.1.1介绍
tagItem	Array [{ },{ }]	type值为`tag`时必填	{ type: "success", value: 1, text: "启用" }	tagItem: [{type: "success",value: 1,text: "启用"},{type: "danger",value: 2,text: "禁用"}]	tobody中内容展示tag类型的情况判断. 具体见下方6.1.2介绍

6.1.1 contentKey type值介绍

假设我们得到的数据5.Demo中的数据，

我们想要把organInfoVo中的sysName显示出来，可以设置key 为organInfoVo key2为 sysName

我们想要把organInfoVo中的userInfoVo 中realName的显示出来，可以设置key 为organInfoVo key2为 userInfoVo key3属性为realName

具体设置如下：

  contentKey: [
    {
      "key": "organInfoVo",
      "type": "object1",
      "key2": "sysName"
    },
    {
      "key": "organInfoVo",
      "type": "object2",
      "key2": "userInfoVo",
      "key3": "realName"
    },
  ],

6.1.2 contentKey tagItem值介绍

tagItem类型为Array Object形式，里面有如下参数

属性	值	是否必填	介绍
type	同Element中el-tag的type属性	是	颜色
value	根据项目需要填写	是	判断条件
text	根据项目需要填写	是	文本内容

设置示例

contentKey: [
  {
    key: "status",
    type: "tag",
    tagItem: [
      {
        type: "success",
        value: 1,
        text: "启用"
      },
      {
        type: "danger",
        value: 2,
        text: "禁用"
      }
    ]
  }
]

6.2 btnOpt 介绍

显示在操作栏下方的按钮,有如下参数

参数	类型	是否必填	参数值	示例	解释
name	String	true	按需求填写	name: "编辑",	操作栏按钮文本
methods	String	false	按需求填写	methods: "handleChange",	按钮点击的事件，父组件接收两个参数，当前行的信息和父组件传递过去的参数同methodParams
methodParams	无限制	false	根据接口返回参数变化	methodParams: {}	事件促发收到的参数
type	String	false	同Element中按钮的type属性		同Element中按钮的type属性
icon		false	同Element中按钮的icon属性		同Element中按钮的icon属性

后期作者会继续更新优化

Vue中表格深色主题

使用步骤

1. git地址

2. 运行

3. 部署

4. 项目截图

5. Demo

6. API属性介绍

6.1 contentKey介绍

6.1.1 contentKey type值介绍

6.1.2 contentKey tagItem值介绍

6.2 btnOpt 介绍