JSFiddle - React, Tailwind, and code Playground

by duckduck0054

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="appTable">
<template>
  <el-table ref="multipleTable" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column prop="date" label="Date" sortable width="180" :filters="[{text: '2016-05-01', 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="name" sortable label="Name" width="180">
    </el-table-column>
    <el-table-column prop="address" label="Address" :formatter="formatter">
    </el-table-column>
    <el-table-column prop="tag" label="Tag" width="100" :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]" :filter-method="filterTag" filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selection status of second and third rows</el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>
</div>

SCSS

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


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

Babel + JSX

var Main = {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'ATom',
          address: '강남구',
          tag: 'Home'
        }, {
          date: '2016-05-02',
          name: 'BTom',
          address: '서초구',
          tag: 'Office'
        }, {
          date: '2016-05-04',
          name: 'CTom',
          address: '송파구',
          tag: 'Home'
        }, {
          date: '2016-05-01',
          name: 'DTom',
          address: '광진구',
          tag: 'Office'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
          	console.log(row);
            console.log(typeof(row));
            console.log(row.date);
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#appTable')