<div> <div> <div> <label>Search</label> <input type="text" v-model="searchQuery" /> </div> </div> <div> <simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"> </simple-grid> </div> </div> <template> <table> <thead> <tr> <th v-for="col in columns"> {{ col.name | capitalize}} </th> <th> Delete </th> </tr> </thead> <tbody> <tr v-for="(index,entry) in dataList | filterBy searchKey"> <td v-for="col in columns"> {{entry[col.name]}} </td> <td> <button @click="deleteItem(index)">delete</button> </td> </tr> </tbody> </table> </template> <script src="../js/vue.js"></script> <script> Vue.component('simple-grid', { template: '#grid-template', props: ['dataList', 'columns', 'searchKey'], methods: { deleteItem: function(index) { this.dataList.splice(index, 1); }, } }) var demo = new Vue({ el: '#app', data: { searchQuery: '', columns: [{ name: 'name' }, { name: 'age' }, { name: 'sex' }], people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] } }) </script>

View Demo

使用知识点

1. 使用Vue.component语法糖

Vue.component是创建并注册组件的语法糖，使用Vue.component注册的组件是全局的。

2. 使用prop将父组件数据传递给子组件

#app元素是父组件，simple-grid是子组件。

在simple-grid组件中定义选项props: ['dataList', 'columns', 'searchKey']
在#app下使用<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"> 将数据传递给simple-grid组件

3. 使用过滤器

{{ col.name | capitalize}}使用了，将字符串的首字母转换为大写后输出。
filterBy filterKey使用了，根据指定条件过滤数组元素，filterBy返回过滤后的数组。

4. 使用数组索引别名

数组默认的索引名称为$index，v-for="(index,entry) in dataList使用了。
括号中的第一个参数index是$index的别名，第二个参数是遍历的数组元素。

5. 使用了v-bind和v-on指令的缩写

<simple-grid :data-list="people" :columns="columns" :search-key="searchQuery"> 使用了v-bind指令的缩写。
:data-list是v-bind:data-list的缩写，:columns是v-bind:columns的缩写，:search-key是v-bind:search-key的缩写。

<button @click="deleteItem(index)">delete</button> 使用了v-on指令的缩写，@click是v-on:click的缩写。

第2步——创建对话框组件

表格数据的添加和修改，我们使用模态对话框来实现。
模态对话框有两种模式，新建模式和修改模式，分别用于新建一条数据和修改指定的数据。
由于对话框的内容来源于具体的数据，所以我们可以考虑将对话框作为simple-grid组件的一个子组件。

modal-dialog组件的模板内容：

<template> <div> <div v-bind:class="{ 'dialog-active': show }"> <div> <header> <h1>{{ title }}</h1> </header> <footer> <div> <label></label> <button v-on:click="save">Save</button> <button v-on:click="close">Close</button> </div> </footer> </div> </div> <div></div> </div> </template>

modal-dialog组件在simple-grid组件中注册：

Vue.component('simple-grid', { // ...已省略 data: function() { return { mode: 0, item: {} } }, components: { 'modal-dialog': { template: '#dialog-template', data: function() { return { // 对话框默认是不显示的 show: false } }, /* * mode = 1是新增数据模式，mode = 2是修改数据模式 * title表示对话框的标题内容 * fields表示对话框要显示的数据字段数组 * item是由simple-dialog传下来，用于绑定表单字段的 */ props: ['mode', 'title', 'fields', 'item'], methods: { close: function() { this.show = false }, save: function() { } } } } // ...已省略 })

由于modal-dialog组件是simple-grid的子组件，所以它应该在simple-grid的template中使用：

<template> <!--...前面的内容已省略 --> <modal-dialog :mode="mode" :title="title" :fields="columns" :item="item"> </modal-dialog> <!--...后面的内容已省略 --> </template>

modal-dialog组件的props选项，追加了3个元素：

title表示对话框的标题内容

fields表示对话框要显示的数据字段数组

item用于绑定表单字段，它是一个对象

注意：由于modal-dialog是一个子组件，它仅用于simple-grid组件的新增或修改模式，所以modal-dialog的template没有使用<slot>元素

使用知识点

1. 使用组件的局部注册

modal-dialog组件没有使用Vue.component进行全局注册，使用simple-grid组件components选项实现了局部注册。

2. 使用组件的data选项

组件的data选项必须以函数的方式返回。

第3步——实现数据新建功能

View Demo