evu2

# Table

# common Table

代码地址 (opens new window)

# config

# tableData

tableData:[
  {
    "username": "username",
    "password": "password"
  },
  {
    "username": "username1",
    "password": "password"
  }
]

# columObj

columObj:{
  "showindex": true,
  "loading": false,
  "lazy": "true",
  "columnData": [
    {
      "text": true,
      "prop": "username",
      "label": "用户名",
      "width": "",
      "align": "center"
    },
    {
      "text": true,
      "prop": "password",
      "label": "密码",
      "width": "",
      "align": "center"
    },
    {
      "isOperation": true,
      "label": "操作",
      "fixed": "right",
      "width": "",
      "align": "center",
      "sortable": false,
      "operation": [
        {
          "type": "text",
          "label": "修改",
          "icon": "",
          "color": "#0f0f0f"
        }
      ]
    }
  ]
}

# pageObj

pageObj:{
  "position": "right",
  "total": 1,
  "pageData": {
    "page": 1,
    "pageSize": 10
  }
}

# maxHeight

maxHeight:600

# callback

<!-- 父组件 -->
<Table-index @handleSizeChange="handleSizeChange"></Table-index>

// 父组件
// 条数变化
handleSizeChange(e) {
    console.log(e)
},

// 子组件
// 条数变化
handleSizeChange(e) {
  this.$emit("handleSizeChange", e);
  // console.log(e)
},

# simple Table

.simple-table {
  min-width: max-content;
  border-top: 1px solid #00b2ff;
  border-left: 1px solid #00b2ff;

  .simple-row-title {
    align-items: stretch;

    .simple-item {
      width: 100%;
      min-width: 100px;
      min-height: 25px;
      border-bottom: 1px solid #00b2ff;
      border-right: 1px solid #00b2ff;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      background: #1d5b99;
      padding: 8px;
    }
  }

  .simple-row {
    align-items: stretch;

    .simple-item {
      width: 100%;
      min-width: 100px;
      min-height: 25px;
      border-bottom: 1px solid #00b2ff;
      border-right: 1px solid #00b2ff;
      font-size: 12px;
      font-weight: 300;
      color: #fff;
      background: #011f4e;
      padding: 8px;
    }
  }

  .table-head-bar {
    min-width: 8px;
    min-height: 100%;
    background: #1d5b99;
    border-bottom: 1px solid #00b2ff;
  }
}