TABLE2

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="appTable2">
  <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" @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" sortable label="address"...

SCSS

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



  .el-table .success-row {
    background: #f0f9eb;
  }
    .el-table .warning-row {
    background: oldlace;
  }