TABLE3

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.0/vuejs-paginator.min.js"></script>
    <script src="//unpkg.com/[email protected]/lib/index.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div id="appTable3">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="BotId">
    <el-input v-model="formInline.botId" placeholder="BotId"></el-input>
  </el-form-item>
  <el-form-item label="BotTpCd">
    <el-select v-model="formInline.botTpCd" placeholder="BotTpCd">
      <el-option label="INT" value="INT"></el-option>
      <el-option label="EXT" value="EXT"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="searchChatbot()">Search</el-button>
  </el-form-item>
</el-form>
<el-button class="btn btnPrimary" type="primary" round>Total Count : {{ tableData.length }}</el-button>
<el-button class="btn btnPrimary" type="primary" round>page : {{ currentPage +1 }} / {{ pageCount }}</el-button>
 <el-table ref="multipleTable" :data="displayItems" :filter-method="filterHandler" @selection-change="handleSelectionChange" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column prop="botId" label="botId" sortable width="180" :filters="[{text: '1111', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]" :filter-method="filterHandler">
    </el-table-column>
    <el-table-column prop="botNm" sortable label="botNm" width="180">
    </el-table-column>
    <el-table-column prop="date" sortable label="date">
    </el-table-column>
    <el-table-column prop="address"...

CSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");



  .el-table .success-row {
    background: #f0f9eb;
  }
    .el-table .warning-row {
    background: oldlace;
  }
  
  a {
  color: #999;
}
.current {
  color: red;
}
ul {
  padding: 0;
  list-style-type: none;
}
li {
  display: inline;
  margin: 5px 5px;
}

a.first::after {
  content:'...'
}

a.last::before {
  content:'...'
}