table-container 表格容器组件

适用于 element-ui 多表格合并 , 且需要固定高度场景

Project setup

npm install @frontz/table-container -S

使用范例

<template>
  <div class="home">
    <button @click="num++">表格数 {{num}}</button>
    <TableWrap :height="400" :childrenLenth="num" >
      <el-table v-for="n in num" :key="n" :data="data" border ref="multipleTable" :show-header="false">
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="date" label="阿斯顿发生的发生发的" > </el-table-column>
        <el-table-column prop="name" label="姓名1" width="380"> </el-table-column>
        <el-table-column prop="name" label="地址"  width="380"> </el-table-column>
        <el-table-column prop="name" label="前面一个"  width="380"> </el-table-column>
        <el-table-column prop="address" label="地址222" width="150" fixed="right">
          <template slot-scope="scope">
            <a href="#">查看 {{scope.$index}}</a>
          </template>
        </el-table-column>
      </el-table>
    </TableWrap>

  </div>
</template>

<script>
import TableWrap from "@frontz/table-container";

export default {
  name: "DEMO",
  components: {
    TableWrap,
  },
  data() {
    return {
      num: 1,
      data: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ]
    }
  },
};
</script>