ts二次封装element-ui的table表格，带loading，分页

新建文件tablePage.vue

<template>
    <div id="table_page">
        <el-table 
            ref="vtable" 
            v-loading="loading"
            @row-click="rowClick" 
            @select="select" 
            @select-all="select" 
            @current-change="rowChange"
            @selection-change="handleSelectionChange"
            :data="data" 
            size="mini" 
            stripe 
            style="width: 100%" 
            highlight-current-row 
            :header-cell-style="headerStyle" 
            :cell-style="cellStyle" 
            :row-style="rowStyle"
        >
            <el-table-column 
                v-if="selection"
                type="selection"
                width="55">
            </el-table-column>
            <template v-for="(item,index) in column">
				<el-table-column 
					v-if="!item.slot" 
					:key="index" 
					:prop="item.prop" 
					:width="item.width" 
					:label="item.label" 
					:align="item.align || 'center'" 
                    :fixed="item.fixed"
                >
				</el-table-column>
				<el-table-column 
					v-if="item.slot" 
					:key="index" 
					:label="item.label" 
					:prop="item.prop" 
					:width="item.width" 
                    :fixed="item.fixed"
					:align="item.align || 'center'">
					<template #default="{ row, $index }">
						<slot :name="item.slot" :index="$index" :row="row" :value="row[item.prop]" :prop="item.prop"></slot>
					</template>
				</el-table-column>
			</template>
        </el-table>
        <el-pagination
            v-if="page"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :current-page.sync="page.PageIndex"
			:total="page.PageTotal" 
			:page-size="page.PageSize">
        </el-pagination>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"
import { Table } from 'element-ui'

@Component({
    props: {
        data: {
            type: Array,
            required: true
        },
        selection: {
            type: Boolean,
        },
        column: {
            type: Array,
            required: true
        },
        height: {
            type: String
        },
        page: {
            required: true,
            type: [Object, Boolean],
            default: function() {
                return {
                    PageIndex: 20,
                    PageTotal: 0,
                    PageSize: 1
                }
            }
        },
        rowStyle: {
            type: [Function, Object],
            default: function() {
                return {}
            }
        },
        cellStyle: {
            type: [Function, Object],
            default: function() {
                return {}
            }
        },
        headerStyle: {
            type: [Function, Object],
            default: function() {
                return {
                    backgroundColor: "rgb(221, 221, 221)",
                    color: "black"
                }
            }
        },
        index: {
            type: Boolean,
            default: false
        },
        check: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        rowClick: {
            type: Function,
            default: function(){}
        },
    },
    components: {
    }
})
export default class TablePage extends Vue {


    public handleCurrentChange(val: number) {
        this.$emit("page", val);
        console.log(val)
    }

    public select(selection: object[], row:object) {
        this.$emit("select", selection, row);
    }

    public clear(){
        (this.$refs["vtable"] as Table).clearSelection();
    }

    public toggle(){
        (this.$refs["vtable"] as Table).toggleAllSelection();
    }

    public rowChange(selection: object[], row:object){
        this.$emit("rowChange", selection, row);
    }

    public handleSelectionChange(selection: object[]){
        this.$emit("handleSelectionChange", selection);
    }

}
</script>

<style scoped>
    #table_page {
        /* height: 100%; */
    }
    /* #table_page .el-table {
        height: calc(100% - 50px);
    } */
    #table_page .el-table {
        position: relative;
        margin-bottom: 33px;
    }

    #table_page .el-pagination {
        float: right;
        position: fixed;
        bottom: 0;
        z-index: 10;
        right: 0;
        background: #fff;
        text-align: right;
        border-top: 1px solid #eee;
        width: 100%;
    }
</style>

依次解释：
v-loading：对表格添加加载效果。
@row-click：当某一行被点击时会触发该事件。
@select：当用户手动勾选数据行的 Checkbox 时触发的事件
@select-all：当用户手动勾选全选 Checkbox 时触发的事件
@current-change：当表格的当前行发生变化的时候会触发该事件，可以拿到用户当前选中的行数据（无checkbox情况下）。如果要高亮当前行，请打开表格的 highlight-current-row 属性
@selection-change：当选择项发生变化时会触发该事件,选中checkbox和取消时都会触发，可以用来获取用户选中的数据。
:data：数组
stripe：是否为斑马纹 table
highlight-current-row：是否要高亮当前行
:header-cell-style：表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
:cell-style:单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。
:row-style：行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。
实例：

import vtable from "@/components/common/TablePage.vue";
components: {
    vtable
  }
<vtable
        ref="vtable"
        :page="page"
        @page="pageChange"
        v-loading="loading"
        :data="tableData"
        @select="changeList"
        :selection="true"
        :column="column"
        :headerStyle="{background: '#fff'}"
      >
</vtable>

ts部分：

  //初始化page,Models是我管理interface接口校验的文件，在这里也粘一下
  // 分页interface
export interface Page {
    PageIndex: number
    PageTotal: number
    PageSize: number
}
//分页初始化数据，这里可以与后端约定返回的字段名称
  private page: Models.Page = {
    PageIndex: 1,
    PageTotal: 0,
    PageSize: 20
  };
  //
    public pageChange(e: number) {
    //拿到用户点击的页码
    this.page.PageIndex = e;
    console.log(e);
    //nextPage是封装好的方法，也粘出来
    // 获取下一页页数
	//export const nextPage = (curPage: number, pageSize: number) => {
    //return (curPage - 1) * pageSize
	//}
	//searchForm是el-form的表单数据对象，是做列表筛选功能
    this.searchForm.skipCount = nextPage(e, this.page.PageSize);
    //更新列表
    this.getProductList();
  }
  //Loading效果使用
  private async getProductList() {
    this.loading = true;
    try {
      let res = await GetMixedProducts.request(this.searchForm);
      this.tableData = res.items;
      if (res.items) {
        this.page.PageTotal = res.totalCount!;
      }
    } catch (error) {
    } finally {
      this.loading = false;
    }
  }
  //勾选数据行时触发
    private changeList(selection: Models.Product[], row: Models.Product) {
    this.checkList = [];
    selection.forEach(element => {
      this.checkList.push(element.id);
    });
  }
  //方便理解，把product粘出来
  // 商品列表 node
export interface Product {
    name: string
    productNumber: string
    saleName: string
    displayOrder: number
    isPublished: boolean
    productCoverThumbPictureUrl: string
    isPortal: boolean
    stockQuantity: number
    hasProductPrice: boolean
    usedForMaintenance: boolean
    isComobo: boolean
    id: string
}
//column
private readonly column = [
    {
      label: "商品图片",
      slot: "productCoverThumbPictureUrl",
      width: 140
    },
    {
      label: "产品名称",
      prop: "name"
    },
    {
      label: "商品名称",
      prop: "saleName"
    },
    {
      label: "商品编号",
      prop: "productNumber",
      width: 120
    },
    {
      label: "是否销售商品",
      slot: "isPortal",
      width: 120
    },
    {
      label: "是否服务配件",
      slot: "usedForMaintenance",
      width: 120
    },
    {
      label: "是否套装商品",
      slot: "isComobo",
      width: 120
    },
    {
      label: "显示顺序",
      prop: "displayOrder",
      width: 120
    },
    {
      label: "上架状态",
      slot: "isPublished",
      width: 120
    },
    {
      label: "操作",
      slot: "operate",
      width: 180
    }
  ];

大致就这样，能提高table复用率，写的不太好，欢迎提问。slot插槽也可以举一个实例：

 <template #isPublished="{ row }">
      <span v-if="row.isPublished === true">已上架</span>
      <span v-else-if="row.isPublished === false">未上架</span>
      <span v-else>未创建</span>
 </template>

1. Table表格例子

1.1. Table表格用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。

1.2. Table Attributes

1.3. Table Events

1.4. Table Methods

1.5. Table Slot

1.6. Table-column Attributes

1.7. Table-column Scoped Slot

2. Table表格例子

2.1. 使用脚手架新建一个名为element-ui-table的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import BaseTable from '../components/BaseTable.vue'
import StripeTable from '../components/StripeTable.vue'
import HighlightTable from '../components/HighlightTable.vue'
import BorderTable from '../components/BorderTable.vue'
import FixHeadTable from '../components/FixHeadTable.vue'
import FixColTable from '../components/FixColTable.vue'
import FixHeadColTable from '../components/FixHeadColTable.vue'
import MaxHeightTable from '../components/MaxHeightTable.vue'
import MultiHeadTable from '../components/MultiHeadTable.vue'
import RadioTable from '../components/RadioTable.vue'
import CheckboxTable from '../components/CheckboxTable.vue'
import SortTable from '../components/SortTable.vue'
import FiltersTable from '../components/FiltersTable.vue'
import ScopedTable from '../components/ScopedTable.vue'
import ExpandTable from '../components/ExpandTable.vue'
import ShowSummaryTable from '../components/ShowSummaryTable.vue'
import SpanMethodTable from '../components/SpanMethodTable.vue'
import IndexTable from '../components/IndexTable.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/BaseTable' },
  { path: '/BaseTable', component: BaseTable },
  { path: '/StripeTable', component: StripeTable },
  { path: '/HighlightTable', component: HighlightTable },
  { path: '/BorderTable', component: BorderTable },
  { path: '/FixHeadTable', component: FixHeadTable },
  { path: '/FixColTable', component: FixColTable },
  { path: '/FixHeadColTable', component: FixHeadColTable },
  { path: '/MaxHeightTable', component: MaxHeightTable },
  { path: '/MultiHeadTable', component: MultiHeadTable },
  { path: '/RadioTable', component: RadioTable },
  { path: '/CheckboxTable', component: CheckboxTable },
  { path: '/SortTable', component: SortTable },
  { path: '/FiltersTable', component: FiltersTable },
  { path: '/ScopedTable', component: ScopedTable },
  { path: '/ExpandTable', component: ExpandTable },
  { path: '/ShowSummaryTable', component: ShowSummaryTable },
  { path: '/SpanMethodTable', component: SpanMethodTable },
  { path: '/IndexTable', component: IndexTable }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建BaseTable.vue

<template>
  <div>
    <h1>基础表格-基础的表格展示用法</h1>
    <h4>当el-table元素中注入data对象数组后, 在el-table-column中用prop属性来对应对象中的键名即可填入数据, 用label属性来定义表格的列名。可以使用width属性来定义列宽。</h4>
    <el-table :data="tableData" style="width: 50%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        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>

2.4. 在components下创建StripeTable.vue

<template>
  <div>
    <h1>带斑马纹表格-使用带斑马纹的表格, 可以更容易区分出不同行的数据</h1>
    <h4>stripe属性可以创建带斑马纹的表格。它接受一个Boolean, 默认为false, 设置为true即为启用。</h4>
    <el-table :data="tableData" stripe style="width: 40%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        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>

2.5. 在components下创建HighlightTable.vue

<template>
  <div>
    <h1>带状态表格-可将表格内容highlight显示, 方便区分[成功、信息、警告、危险]等内容</h1>
    <h4>可以通过指定Table组件的row-class-name属性来为Table中的某一行添加class, 表明该行处于某种状态。</h4>
    <el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
export default {
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

2.6. 在components下创建BorderTable.vue

<template>
  <div>
    <h1>带边框表格</h1>
    <h4>默认情况下, Table组件是不具有竖直方向的边框的, 如果需要, 可以使用border属性, 它接受一个Boolean, 设置为true即可启用。</h4>
    <el-table :data="tableData" border style="width: 50%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        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>

2.7. 在components下创建FixHeadTable.vue

<template>
  <div>
    <h1>固定表头-纵向内容过多时, 可选择固定表头</h1>
    <h4>只要在el-table元素中定义了height属性, 即可实现固定表头的表格, 而不需要额外的代码。</h4>
    <el-table :data="tableData" height="250" border style="width: 40%">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    }
  }
}
</script>

2.8. 在components下创建FixColTable.vue

<template>
  <div>
    <h1>固定列-横向内容过多时, 可选择固定列</h1>
    <h4>固定列需要使用fixed属性, 它接受Boolean值或者left/right, 表示左边固定还是右边固定。</h4>
    <el-table :data="tableData" border style="width: 30%">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick (row) {
      console.log(row)
    }
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  }
}
</script>

2.9. 在components下创建FixHeadColTable.vue

<template>
  <div>
    <h1>固定列和表头-横纵内容过多时, 可选择固定列和表头</h1>
    <h4>固定列和表头可以同时使用, 只需要将上述两个属性分别设置好即可。</h4>
    <el-table :data="tableData" style="width: 40%" height="250">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

2.10. 在components下创建MaxHeightTable.vue

<template>
  <div>
    <h1>流体高度-当数据量动态变化时, 可以为Table设置一个最大高度</h1>
    <h4>通过设置max-height属性为Table指定最大高度。此时若表格所需的高度大于最大高度, 则会显示一个滚动条。</h4>
    <el-table :data="tableData" style="width: 50%" max-height="250">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    deleteRow (index, rows) {
      rows.splice(index, 1)
    }
  },
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

2.11. 在components下创建MultiHeadTable.vue

<template>
  <div>
    <h1>多级表头-数据结构比较复杂的时候, 可使用多级表头来展现数据的层次关系</h1>
    <h4>只需要在el-table-column里面嵌套el-table-column, 就可以实现多级表头。</h4>
    <el-table :data="tableData" style="width: 50%">
      <el-table-column prop="date" label="日期" width="150"></el-table-column>
      <el-table-column label="配送信息">
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column label="地址">
          <el-table-column prop="province" label="省份" width="120"></el-table-column>
          <el-table-column prop="city" label="市区" width="120"></el-table-column>
          <el-table-column prop="address" label="地址" width="300"></el-table-column>
          <el-table-column prop="zip" label="邮编"></el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }]
    }
  }
}
</script>

2.12. 在components下创建RadioTable.vue

<template>
  <div>
    <h1>单选-选择单行数据时使用色块表示</h1>
    <h4>Table组件提供了单选的支持, 只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件, 它会传入currentRow, oldCurrentRow。如果需要显示索引, 可以增加一列el-table-column, 设置type属性为index即可显示从1开始的索引号。</h4>
    <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column property="date" label="日期" width="120"></el-table-column>
      <el-table-column property="name" label="姓名" width="120"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
      <el-button @click="setCurrent()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        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 弄'
      }],
      currentRow: null
    }
  },
  methods: {
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    }
  }
}
</script>

2.13. 在components下创建CheckboxTable.vue

<template>
  <div>
    <h1>多选-选择多行数据时使用Checkbox</h1>
    <h4>实现多选非常简单: 手动添加一个el-table-column, 设type属性为selection即可; 默认情况下若内容过多会折行显示, 若需要单行显示可以使用show-overflow-tooltip属性, 它接受一个Boolean, 为true时多余的内容会在hover时以tooltip的形式显示出来。</h4>
    <el-table ref="multipleTable" :data="tableData" style="width: 20%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: []
    }
  },
  methods: {
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

2.14. 在components下创建SortTable.vue

<template>
  <div>
    <h1>排序-对表格进行排序, 可快速查找或对比数据</h1>
    <h4>在列中设置sortable属性即可实现以该列为基准的排序, 接受一个Boolean, 默认为false。可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序, 需将sortable设置为custom, 同时在Table上监听sort-change事件, 在事件回调中可以获取当前排序的字段名和排序顺序, 从而向接口请求排序后的表格数据。在本例中, 我们还使用了formatter属性, 它用于格式化指定列的值, 接受一个Function, 会传入四个参数: row, column, cellValue和index, 可以根据自己的需求进行处理。</h4>
    <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: 'd王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: 'b王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: 'a王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: 'c王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    formatter (row, column, cellValue, index) {
      return index + row.address
    }
  }
}
</script>

2.15. 在components下创建FiltersTable.vue

<template>
  <div>
    <h1>筛选-对表格进行筛选, 可快速查找到自己想看的数据</h1>
    <h4>在列中设置filtersfilter-method属性即可开启该列的筛选, filters是一个数组, filter-method是一个方法, 它用于决定某些数据是否显示, 会传入三个参数: value, row和column。</h4>
    <el-table ref="filterTable" :data="tableData" style="width: 40%">
      <el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="dateFilter" :filter-method="filterHandler"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column>
      <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="right-start">
        <template slot-scope="scope">
          <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="resetDateFilter">清除日期过滤器</el-button>
    <el-button @click="clearFilter">清除所有过滤器</el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dateFilter: [{ text: '2016-05-01', value: '2016-05-01' }, { text: '2016-05-02', value: '2016-05-02' }, { text: '2016-05-03', value: '2016-05-03' }, { text: '2016-05-04', value: '2016-05-04' }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        tag: '家'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        tag: '公司'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        tag: '家'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        tag: '公司'
      }]
    }
  },
  methods: {
    resetDateFilter () {
      this.$refs.filterTable.clearFilter('date')
    },
    clearFilter () {
      this.$refs.filterTable.clearFilter()
    },
    formatter (row, column) {
      return row.address
    },
    filterTag (value, row) {
      return row.tag === value
    },
    filterHandler (value, row, column) {
      const property = column.property
      return row[property] === value
    }
  }
}
</script>

2.16. 在components下创建ScopedTable.vue

<template>
  <div>
    <h1>自定义列模板-自定义列的显示内容，可组合其他组件使用</h1>
    <h4>通过Scoped slot可以获取到row, column, $index和store(table内部的状态管理)的数据。</h4>
    <el-table :data="tableData" style="width: 30%">
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        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 弄'
      }]
    }
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    }
  }
}
</script>

2.17. 在components下创建ExpandTable.vue

<template>
  <div>
    <h1>展开行-当行内容过多并且不想显示横向滚动条时, 可以使用Table展开行功能</h1>
    <h4>通过设置type="expand"和Scoped slot可以开启展开行功能, el-table-column的模板会被渲染成为展开行的内容, 展开行可访问的属性与使用自定义列模板时的Scoped slot相同。</h4>
    <el-table :data="tableData" style="width: 60%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline>
            <el-form-item label="商品名称"><span>{{ props.row.name }}</span></el-form-item>
            <el-form-item label="所属店铺"><span>{{ props.row.shop }}</span></el-form-item>
            <el-form-item label="商品 ID"><span>{{ props.row.id }}</span></el-form-item>
            <el-form-item label="店铺 ID"><span>{{ props.row.shopId }}</span></el-form-item>
            <el-form-item label="商品分类"><span>{{ props.row.category }}</span></el-form-item>
            <el-form-item label="店铺地址"><span>{{ props.row.address }}</span></el-form-item>
            <el-form-item label="商品描述"><span>{{ props.row.desc }}</span></el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品 ID" prop="id"></el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="描述" prop="desc"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    }
  }
}
</script>

2.18. 在components下创建ShowSummaryTable.vue

<template>
  <div>
    <h1>表尾合计行-若表格展示的是各类数字, 可以在表尾显示各列的合计</h1>
    <h4>将show-summary设置为true就会在表格尾部展示合计行。默认情况下, 对于合计行, 第一列不进行数据求合操作, 而是显示「合计」二字(可通过sum-text配置), 其余列会将本列所有数值进行求合操作, 并显示出来。当然, 你也可以定义自己的合计逻辑。使用summary-method并传入一个方法, 返回一个数组, 这个数组中的各项就会显示在合计行的各列中, 具体可以参考本例中的第二个表格。</h4>
    <el-table :data="tableData" border show-summary style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1"></el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2"></el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3"></el-table-column>
    </el-table>

    <el-table :data="tableData" border :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" 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 {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        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
      }]
    }
  },
  methods: {
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>

2.19. 在components下创建SpanMethodTable.vue

<template>
  <div>
    <h1>合并行或列-多行或多列共用一个数据时, 可以合并行或列</h1>
    <h4>通过给table传入span-method方法可以实现合并行或列, 方法的参数是一个对象, 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组, 第一个元素代表rowspan, 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。</h4>
    <el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="amount1" sortable label="数值 1"></el-table-column>
      <el-table-column prop="amount2" sortable label="数值 2"></el-table-column>
      <el-table-column prop="amount3" sortable label="数值 3"></el-table-column>
    </el-table>

    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" 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 {
  data () {
    return {
      tableData: [{
        id: '12987122',
        name: '王小虎',
        amount1: '234',
        amount2: '3.2',
        amount3: 10
      }, {
        id: '12987123',
        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
      }]
    }
  },
  methods: {
    arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2]
        } else if (columnIndex === 1) {
          return [0, 0]
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

2.20. 在components下创建IndexTable.vue

<template>
  <div>
    <h1>自定义索引-自定义type=index列的行号</h1>
    <h4>通过给type=index的列传入index属性, 可以自定义索引。该属性传入数字时, 将作为索引的起始值。也可以传入一个方法, 它提供当前行的行号(从0开始)作为参数, 返回值将作为索引展示。</h4>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" :index="indexMethod"></el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
        tag: '家'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333,
        tag: '公司'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333,
        tag: '家'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333,
        tag: '公司'
      }]
    }
  },
  methods: {
    indexMethod (index) {
      return index * 2
    }
  }
}
</script>

2.21. 运行项目, 访问http://localhost:8080/#/BaseTable

2.22. 运行项目, 访问http://localhost:8080/#/StripeTable 

2.23. 运行项目, 访问http://localhost:8080/#/HighlightTable

2.24. 运行项目, 访问http://localhost:8080/#/BorderTable 

2.25. 运行项目, 访问http://localhost:8080/#/FixHeadTable 

2.26. 运行项目, 访问http://localhost:8080/#/FixColTable 

2.27. 运行项目, 访问http://localhost:8080/#/FixHeadColTable 

2.28. 运行项目, 访问http://localhost:8080/#/MaxHeightTable 

2.29. 运行项目, 访问http://localhost:8080/#/MultiHeadTable 

2.30. 运行项目, 访问http://localhost:8080/#/RadioTable 

2.31. 运行项目, 访问http://localhost:8080/#/CheckboxTable 

2.32. 运行项目, 访问http://localhost:8080/#/SortTable 

2.33. 运行项目, 访问http://localhost:8080/#/FiltersTable 

2.34. 运行项目, 访问http://localhost:8080/#/ScopedTable

2.35. 运行项目, 访问http://localhost:8080/#/ExpandTable 

2.36. 运行项目, 访问http://localhost:8080/#/ShowSummaryTable 

2.37. 运行项目, 访问http://localhost:8080/#/SpanMethodTable 

2.38. 运行项目, 访问http://localhost:8080/#/IndexTable 

前言：这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧！

一、Vue的计算属性

关键词：computed。

用来处理一些复杂的逻辑，类似于在computed里面建立一个函数或方法。

（1）一个例子

假如需要反转一个字符串，我们会这么做：

<div id="app">
    {{message.split('').reverse().join('')}}
</div>

但是如果我们要在多处反转字符串，这样写反而麻烦，不利于多次调用，也不容易看懂理解。

如果使用计算属性，就会方便许多，来看看吧：

<div id="app">
   <p>原始字符串：{{message}}</p>
   <p>计算属性后反转的字符串{{reversedMessage}}</p>
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        message:'我爱学习'
    },
    computed:{
        //计算属性的getter
        reversedMessage:function(){
            //this指向vm实例
            return this.message.split('').reverse().join('')
        }
    }
})
</script>

这个例子声明了一个计算属性reversedMessage，提供的函数将用作属性vm.reversedMessage的getter。当vm.message（依赖）的值改变时，vm.reversedMessage也会跟着更新改变。

（2）computed 和 methods 的比较

如果使用methods是这样的：

methods:{
	reversedMessage:function(){
	  return this.message.split('').reverse().join('')
   }
}

看了上面的代码，发现，诶，好像和methods没有什么区别嘛，确实，在效果上两个都是一样的。区别：

• 但是computed是基于它的依赖缓存，只有相关依赖发生改变是才会重新取值；
• 而在使用methods时，在重新渲染的时候，函数总会重新调用执行。

简答说就是，使用computed性能会更好，但是如果不希望有缓存，可以使用methods属性。

（3）computed的setter

computed属性默认只有getter，不过在需要的时候也可以直接提供一个setter：

<script>
var vm = new Vue({
    el:"#app",
    data:{
        name:"小花",
        age:"18"
    },
    computed:{
        site:{
            //getter
            get:function(){
              return this.name+' '+this.age
        },
        //setter
            set:function(newvalue){
                var names = newvalue.split('')//把用户输入的site分开
                this.name = names[0]
                this.age = names[names.length-1]
            }
        }
    }
})
//调用setter、vm.name和vm.age也会被对应更新
vm.site = '大花 31';      //这里已经改变了原来的数据
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
</script>

运行结果为:

//没有调用之前
小花 18
//调用之后
name:大花
age：31

二、Vue的监听属性

监听属性 watch 就是当你监听的那个参数发生改变时，就会触发一个事件/函数。我们可以通过watch来响应数据的变化。

例如：要进行千米和米之间的转化，就可以使用监听

<div id="app">
    千米：<input type = "text" v-model = "km">
    米：<input type = "text" v-model = "m">
</div>
<p id="info"></p>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            km:0,
            m:0
        },
        watch:{
            km:function(value){
                this.km = value;
                this.m = this.km * 1000
            },
            m:function(value){
                this.km = value/1000;
                this.m = value;
            }
        }
    });
    //$watch是一个实例方法
    //这里监听的是km的变化，当km变化时，就会响应
    vm.$watch('km',function(newvalue,oldvalue){
        //这个回调将在vm.km被改变后使用
       //新的值写在前面，旧的写在后面 
        document.getElementById("info").innerHTML = "修改前值为："+oldvalue + ",修改后的值为：" + newvalue;
    })
</script>

运行结果如下：


当两个框其中一个框改变时，都会相应的改变

是不是很好玩啊！！！！！

三、Vue的样式绑定

• class 和 style 是HTML元素的属性，用于设置元素的样式，在vue中我们可以通过v-bind来设置样式属性。
• v-bind 在处理class 和style时，专门增强了它。表达式的结果除了字符串之外，还可以是对象或数组。

class属性绑定

（1）为v-bind：class设置一个对象

<div v-bind:class="{'active':isactive}"></div>

当isactive的值为true时，则为这个div设置了active样的class

（2）在对象中传入更多属性来动态切换多个class

<div class="app" v-bind:class="{'aaa:isaaa','bbb:isbbb'}">
</div>
//则这个div有三个class，即app、aaa、bbb
<!--  <div class="app aaa bbb"></div>   
       当isbbb为true时，它会覆盖前面的class-->

（3）直接在data里绑定一个对象

<div id="app">
  <div v-bind:class="hhh"></div>//这里hhh为对象
</div>
<script>
new Vue({
  el: '#app',
  data: {
    hhh: {
      aaa: true, //这里aaa为一种class
      'bbb': true //这里bbb为一种class
    }
  }
})
</script>

（4）绑定返回对象的计算属性。这是一个常用且强大的模式

<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,//判断是否为true
        'text-danger': this.error.value && this.error.type === 'fatal',//判断是否为true
      }
    }
  }
})
</script>

（5）数组语法

可以把一个数组传给v-bind：class

<div id="app">
	<div v-bind:class="[aaa, bbb]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
      //这里的aaa bbb 都是class
    activeClass: 'aaa',
    errorClass: 'bbb'
  }
})
</script>

还可以使用三元表达式来切换列表中的class：

<div v-bind:class = "[hhhclass,isaaa ? aaaclass : '']"></div>

hhhclass是始终存在的，当isaaa值为true时添加aaaclass类。

Vue的style（内联样式）

（1）直接在v-bind里设置样式:

<div id="app">
    <div v-bind:style="{color:aaacolor,fontSize:size+'px'}">
        我爱学习
    </div>
</div>
<!-- 即为<div style="color:red;font-size:30px">我爱学习</div>-->

（2）直接绑定到一个样式对象，让模板更清晰：

<div id="app">
    <div v-bind:style="styleObject">我爱学习</div>
</div>
//styleobject在data里定义

（3）使用数组将多个样式对象应用到一个元素上;

<div id="app">
    <div v-bind:style="[aaastyle,bbbstyle]">我爱学习</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    aaastyles: {
      color: 'green',
      fontSize: '30px'
    },
	bbbstyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

自动添加前缀

当 v-bind：style 使用需要添加 浏览器引擎前缀 的css property时，如 transform，vue. js会自动侦测并添加相应的前缀。