JSFiddle - React, Tailwind, and code Playground

by Lu Max

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/vue-easytable/umd/js/index.js"></script>
<div id="app">
<template>
    <div>
        <v-table :width="1100" :height="500"  :columns="columns" :table-data="tableData" even-bg-color="#f4f4f4" row-hover-color="#eee" row-click-color="#edf7ff" :cell-merge="cellMerge"></v-table>
    </div>
</template>
</div>

SCSS

@import url("//unpkg.com/vue-easytable/umd/css/index.css");

Babel + JSX

var Main ={
        name: 'frozen-title-columns',
        data(){
            return {
                tableData: [{"name":"赵伟","gender":"男","birthday":'1963-7-9',"height":"183","email":"[email protected]","tel":"156*****1987","hobby":"钢琴、书法、唱歌","address":"上海市黄浦区金陵东路569号17楼"},
                            {"name":"李伟","gender":"男","birthday":'2003-12-7',"height":"166","email":"[email protected]","tel":"182*****1538","hobby":"钢琴、书法、唱歌","address":"上海市奉贤区南桥镇立新路12号2楼"},
                            {"name":"孙伟","gender":"女","birthday":'1993-12-7',"height":"186","email":"[email protected]","tel":"161*****0097","hobby":"钢琴、书法、唱歌","address":"上海市崇明县城桥镇八一路739号"},
                            {"name":"周伟","gender":"女","birthday":'1993-12-7',"height":"188","email":"[email protected]","tel":"197*****1123","hobby":"钢琴、书法、唱歌","address":"上海市青浦区青浦镇章浜路24号"},
                            {"name":"吴伟","gender":"男","birthday":'1993-12-7',"height":"160","email":"[email protected]","tel":"183*****6678","hobby":"钢琴、书法、唱歌","address":"上海市松江区乐都西路867-871号"},
                            {"name":"冯伟","gender":"女","birthday":'1993-12-7',"height":"168","email":"[email protected]","tel":"133*****3793","hobby":"钢琴、书法、唱歌","address":"上海市金山区龙胜路143号一层"},
                            {"name":"褚伟","gender":"男","birthday":'1993-12-7',"height":"170","email":"[email protected]","tel":"189*****2345","hobby":"钢琴、书法、唱歌","address":"上海市闵行区都市路2988号2楼"},],
                columns:[
                       {field: 'name', title:'姓名', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true,isEdit:true},
                       {field: 'gender', title:'性别', width: 150, titleAlign: 'center',columnAlign:'center', isFrozen: true},
                       {field: 'tel', title: '手机号码', width: 180, titleAlign: 'center',columnAlign:'center', isFrozen: false},
                       {field: 'birthday', title: '出生日期', width: 180, titleAlign: 'center',columnAlign:'center'},
                       {field: 'hobby', title: '爱好', width: 380,...