来个效果

名称	年龄	性别
张三	11	男
李四	12	女
王五	13	-

当然，上诉只是要实现的效果，还要再加上多选功能

浅谈表格

表格组件比较没有技术含量，主要掌握vue的v-for的使用就可以了，但是多选功能却比较复杂，然而这个复杂的问题却被上述网址所展示的代码优雅的解决了，所以这个组件会是一个非常值得学习的代码

主要讲多选哈，其他的就带过了

多选功能

如https://segmentfault.com/q/1010000006893364?_ea=1172273里面的回答，其原理：

给每个数据增加一个属性，selected
在 computed 里面增加一个 allSelected 的计算属性
定义该属性的 get & set
把allSelected 绑定到 thead 的 checkbox 上

实现的效果：

tbody 里面每行都选中，thead checkbox自动选中
thead checkbox选中状态下 tbody某一行不选择，thead 选中自动取消
thead checkbox点击选中，tbody所有行选中
thead checkbox点击取消选中 tbody所有行不选中

好了，上诉文字都是抄袭，还得来点真货，是自己修改而成的：

template

<template>
<div class="mtable">
    <table class="table" >
        <thead>
            <th v-if="mulSelect" >
                <div><input type="checkbox" v-model="allSelected" /></div>
            </th>
            <th v-for="field in fields" >
                {{field.name}}
            </th>
        </thead>
        <tbody>
            <tr v-for="data,index in rows" >
                <td v-if="mulSelect" >
                    <div><input type="checkbox" v-model="items[index].seleced" /></div>
                </td>
                <td v-for="field in fields" >
                    {{data[field.name]}}
                </td>
            </tr>
        </tbody>
    </table>
</div>
</template>

其中mulSelect，rows，field是父组件传递的参数，mulSelect用来控制是否显示多选，rows是json格式的数据，fields包含有属性名称

script

<script>

function getItems(){
    var items = [];
    for(var i=0;i<100;i++){//定义支持最大行数为100行
        items.push({
            seleced:false
        })
    }
    return items
}

const ITEMS = getItems()

export default {
    name: 'Table',
    data(){
        return {
            "items":ITEMS       
        }
    },
    props:[
        "fields","rows","mulSelect"
    ],
    computed:{
        allSelected:{
            get: function () {
            return this.items.reduce(function(prev, curr) {
                return prev && curr.seleced;
            },true);
          },
          set: function (newValue) {
            this.items.forEach(function(item){
                item.seleced = newValue;
            });
          }
        }
    }
}
</script>

其中getItems可以看出，只支持100行，有需要的话可以自行调整，废话不多说了，上样式：

css

<style>
table.table{
    margin: 0 auto;
    empty-cells:show; 
    border-collapse: collapse;
    width: 100%;
}


.table tr{
    
}
.mtable{
    width: 100%;
    max-height: 450px;
    overflow: auto;
}
.table td,.table th{
    border: 1px #eee solid;
    height: 30px;
    line-height: 30px;
    min-width: 64px;
    overflow: hidden;
}

.table tr td:first-child,.table thead th:first-child{
  width: 32px;
  padding: 0px;
}
.table input[type=checkbox]{
    zoom: 180%;
    margin-top: 8px;
}
</style>

父组件调用

...
<Table :fields="fields" :rows="rows" :mulSelect="mulSelect" />
...

以下代码是必须的：

<script>
import Table from '@/components/Table'
...
components:{
    "Table":Table
}
...

好困呐，还落下什么呢？对了，还有张三和李四：

//数据格式
const fields = [
    {name:"姓名"},{name:"年龄",name"性别"}
]
const rows=[
    {"姓名":"张三","年龄":11,"性别":"男"},
    {"姓名":"李四","年龄":2,"性别":"女"},
    {"姓名":"王五","年龄":13,"性别":"-"}
]

该睡了。。。

另外，分页组件，请查看本人另一篇文章vue实现分页组件