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

image

使用步骤

1. git地址

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

2. 运行

npm run serve

3. 部署

npm run build

4. 项目截图

image

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属性介绍

6.1 contentKey介绍

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

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形式，里面有如下参数

设置示例

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

6.2 btnOpt 介绍

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

后期作者会继续更新优化