vue和并列element组件table和自定义table写法

vue和并列element组件table和自定义table写法

1、element组件写的

<template>
  <div id="tables">
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="classify" label="分类" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名">
      </el-table-column>
      <el-table-column prop="amount1" label="数值 1（元）">
      </el-table-column>
      <el-table-column prop="amount2" label="数值 2（元）">
      </el-table-column>
      <el-table-column prop="amount3" label="数值 3（元）">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'Tables',
    data() {
      return {
        // 也可以写{id: '12987122',classify: '第一大类',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}
        tableData: [{
          id: '12987122',
          classify: '第一大类',// 这个是第一个，合并之后的四个，第六个开始重新合并分大类
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          classify: '第一大类',// 这里的classify可以写也可以不写，因为他是要合并的，所以只记录第一个大类，之后的大类都不会被计入
          name: '王中虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王大虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王老虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王死虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }, {
          id: '12987127',
          classify: '第二大类',// 这个是第六个，前面五个已经合并了，第六个开始重新合并分大类
          name: '王骨虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 99
        }, {
          id: '12987128',
          name: '王灰虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 88
        }],
        merge:'5'
      };
    },
    methods: {
      objectSpanMethod({row,column,rowIndex,columnIndex}) {// 这里不用里他，element固定的写法
        if (columnIndex === 0) {// 这里不用里他，这个是从下标0开心合并的，0代表第一列的合并，1代表第二列的合并，以此类推
          if (rowIndex % this.merge === 0) {//每this.num（data里面的num）行，合并this.num行
            return {
              rowspan: this.merge,// 合并this.num（我data数据写的是5行）行
              colspan: 1 // 这个是合并的列的个数，1代表一个合并（0下标合并），2代表两个合并（下标0和下标1）以此类推
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  }
</script>

<style>
</style>

2、自定义table

<template>
  <div id="tabless">
    <div class="t_demo">
      <table border="1">
        <thead>
          <tr>
            <th>分类</th>
            <th>姓名</th>
            <th>数值 1（元）</th>
            <th>数值 2（元）</th>
            <th>数值 3（元）</th>
            <th>操作</th>
          </tr>
        </thead>
        <!-- 第一次遍历data大数组下的内容 -->
        <tbody v-for="item in tableData" :key="item.id">
          <!-- 第二次遍历大数组下的小数组list -->
          <tr v-for="(item1,index) in item.list" :key="item1.index">
            <!-- 取大数组的第一个分类进行展示，然后合并第一个合并列 -->
            <td v-if="!index" :rowspan="item.list.length">{{item.classify}}-{{item.id}}</td>
            <td>{{item1.Name}}-{{item1.id}}</td>
            <td>{{item1.amount1}}</td>
            <td>{{item1.amount2}}</td>
            <td>{{item1.amount3}}</td>
            <td>
              <button @click="del(item1.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Tabless',
    data(){
      return{
        tableData:[
          {
            classify:'分类',
            id:1,
            list:[
              {id:11,Name:'王小虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
              {id:12,Name:'王中虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
            ]
          },
          {
            classify:'分类',
            id:2,
            list:[
              {id:21,Name:'王小虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
              {id:22,Name:'王中虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
              {id:23,Name:'王老虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
              {id:24,Name:'王死虎',amount1:'你是个蛤蟆皮',amount2:'你是个蛤蟆皮',amount3:'你是个蛤蟆皮'},
            ]
          }
        ]
      }
    },
    methods:{
      del(id){
        this.tableData.forEach(item =>{
          var index = item.list.findIndex(item1 =>{
            if(item1.id == id){
              item.list.splice(index,1)
              return true
            }
          })
        })
      }
    }
  }
</script>

<style>
  #tabless{
    height: auto;
    width: 100%;
    margin: 0 auto;
  }
  .t_demo table {
    border-collapse: separate;
    border-spacing: 5px 5px;
    margin: 0 auto;
  }
</style>