JSFiddle - React, Tailwind, and code Playground

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-table ref="grid_table"
                stripe
                border
                :data="tableData.dataList" style="width: 100%">
                <el-table-column type="selection" width="55"></el-table-column>
                <template v-for="item in tableData.columns" v-if="item.show">
                    <el-table-column
                        show-overflow-tooltip
                        :key="item.key"
                        :label="item.name"
                        :min-width="item.minWidth"
                        :width="item.width"
                        :prop="item.key"
                        :fixed="item.fixed"
                        >
                    </el-table-column>
                    <el-table-column type="expand" v-if="item.key==='stId'">
                        <template slot-scope="props">
                            <el-tabs type="border-card">
  <el-tab-pane label="用户管理"><div style="height:20px"> 用户管理 </div></el-tab-pane>
  <el-tab-pane label="配置管理"><div style="height:100px"> 配置管理 </div></el-tab-pane>
  <el-tab-pane label="角色管理"><div style="height:150px"> 角色管理 </div></el-tab-pane>
  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
</el-tabs>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
</div>

CSS

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

JavaScript

var Main = {
  data() {
    return {
      tableData:{
      dataList:[],
      columns:[
      	{key:'id',name:'系统订单号',width:'105px',show:true,sortable:true},
        {key:'stId',name:'销售平台订单号',width:'130px',show:true,sortable:true},
        {key:'id2',name:'付款时间',width:'100px',show:true,sortable:true},
        {key:'name',name:'店铺',minWidth:'70px',show:true,fixed:'right'}
         ]
      }
    }
  },
  mounted(){
  					for(let i = 20;i--;)
            this.tableData.dataList.push({
                id:1,name:'名称','id2':'2017-10-22 11:22:10','a':'2017-10-22 11:22:10','b':'2017-10-22 11:22:10','c':'参考售价','d':'虚拟库存数','e':'状态',expand:{ajax:''}
            })
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')