datam-components

泰豪大数据中台数据公共组件库

运行

npm run dev

发布

# 生成库
npm run lib
# 使用在https://www.npmjs.com上注册的用户名密码来登录
npm login // vcvt/360121
# 发布到npm仓库,每次发布需要先修改package.json中的版本号
npm publish

引入

npm install datam-components --save

组件列表及参数

说明: 所有组件提供统一的属性config对象,所有配置均在config对象中设置, 使用样例参考App.vue

• DmButton(按钮)

{
    text: '查询', // 按钮名称
    icon: 'el-icon-search' // 按钮图标
}

• DmTable(表格)

{
    tableData: [ // 表格数据
      {
        "index": 1,
        "dirname": "广东",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      },
      {
        "index": 2,
        "dirname": "广西",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      },
      {
        "index": 3,
        "dirname": "湖南",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      }
    ],
    columns: [ //表头列表
      {
        prop: 'index', // 属性
        label: '序号', // 文本
        width: '50' // 宽度
      },
      {
        prop: 'dirname',
        label: '目录名称',
        width: '100'
      },
      {
        prop: 'parentDir',
        label: '上级目录',
        width: '100'
      },
      {
        prop: 'updateTime',
        label: '修改时间',
        width: ''
      }
    ],
    operations: [
      {
        'name': '编辑',
        'icon': 'el-icon-edit',
        'method': 'editColumn'
      },
      {
        'name': '添加',
        'icon': 'el-icon-plus',
        'method': 'addColumn'
      }
    ]
}

• DmPagination(带分页的表格)

{
    tableData: [
      {
        "index": 1,
        "dirname": "广东",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      },
      {
        "index": 2,
        "dirname": "广西",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      },
      {
        "index": 3,
        "dirname": "湖南",
        "parentDir": "根目录",
        "updateTime": "2020-10-15 10:00:00"
      }
    ],
    columns: [
      {
        prop: 'index',
        label: '序号',
        width: '50'
      },
      {
        prop: 'dirname',
        label: '目录名称',
        width: '100'
      },
      {
        prop: 'parentDir',
        label: '上级目录',
        width: '100'
      },
      {
        prop: 'updateTime',
        label: '修改时间',
        width: ''
      }
    ],
    total: 20, // 总记录数
    page: 1, // 当前页号
    limit: 10, // 页大小
    operations: [
      {
        'name': '编辑',
        'icon': 'el-icon-edit',
        'method': 'editColumn'
      },
      {
        'name': '添加',
        'icon': 'el-icon-plus',
        'method': 'addColumn'
      }
    ]
}

• DmTree(树)

{
    data: [{ // 数据
      label: '一级 1', // 名称
      children: [{ // 子节点
        label: '二级 1-1',
        children: [{
          label: '三级 1-1-1'
        }]
      }]
    }]，
    props:  {
      children: 'children',
      label: 'label'
    },
    nodeKey: 'index', // 键
    placeholder: '请输入', // 输入框默认内容
    defaultExpandAll: true, // 是否展开所有节点
    contextMenus: [ // 右键菜单列表
      {
          "name": "新增目录", // 菜单名称
          "method": "add" // 方法名
      },
      {
          "name": "编辑目录",
          "method": "edit"
      }
    ]
}