一个标准的表格由<table>、<thead>、<tbody> 、< tr >、 <th>、<td>等元素组成。
表格组件的所有内容(表头和行数据)由两个 prop 构成 : columns 和 data。两者都是数组, columns用来描述每列的信息 , 井渲染在表头<thead> 内 ,可以指定某一列是否需要排序: data 是每一行的数据,由 columns 决定每一行里各列 的顺序。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可排序表格组件</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
<v-table :data="data" :columns="columns"></v-table>
<button @click="handleAddData">添加数据</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="table.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el:'#app',
data:{
columns:[
{
title:'姓名',
key:'name'
},
{
title:'年龄',