精华内容
下载资源
问答
  • 2022-05-24 15:43:22

    1.header-cell-style使用方法

    header-cell-style方法是改变表格头部样式的内置属性,可以配置表头的样式

    :header-cell-style="{ background: '#f3f6fd', color: '#555' }"
    

    2.表格的type="selection"的使用方法,将表头中的全选框取消

     <el-table-column type="selection"> </el-table-column>
    

    当el-table增加改属性后会增加全选功能,需求是将表头中的全选框取消,下面的css代码需要放在App.vue中。在组件的style中不生效

    .el-table__header .el-table-column--selection {
      visibility: hidden;
      background: red !important;
      z-index: 99999;
    }
    .el-table__header-wrapper {
      background: #f3f6fd;
    }
    li {
      list-style: none;
    }
    

    3.type="selection"属性,单选互斥功能

    当设置type="selection"属性时,ui默认是可以多选的,需求是table单选,

    		<el-table
              ref="multipleTable"
              :data="tableData"
              @selection-change="selectionChange"
              @select="select"
              tooltip-effect="dark"
              style="width:100%;height:80%;overflow: auto;"
              :header-cell-style="{ background: '#f3f6fd', color: '#555' }"
            >
    

    当表格要实现互斥单选功能是,需要使用内置的selection-change和select事件前者为:当选择项发生变化时会触发该事件;后者为:当用户手动勾选数据行的 Checkbox 时触发的事件

     select(selection, row) {
          // 清除 所有勾选项
          this.$refs.multipleTable.clearSelection();
          // 当表格数据都没有被勾选的时候 就返回
          // 主要用于将当前勾选的表格状态清除
          if (selection.length == 0) return;
          this.$refs.multipleTable.toggleRowSelection(row,true);
        },
        // 表格的选中 可以获得当前选中的数据
        selectionChange(val) {
          // 将选中的数据存储起来
          console.log(val)
          //这里输出的数组当第一次选择的时候数组为一项,当多次选择之后数组中为两项,其中第二项为选中的值
          //这里可以根据输出的值的数组长度来拿到最新选择的值
        },
    

    4.table表格页面渲染完成自动勾选toggleRowSelection使用

    toggleRowSelection用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)

     toggleSelection(rows) {
            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(this.tableData.find(v=>v.scenario_id==row.scenario_id),true);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
    

    在表格渲染的请求方法的回调中 使用

    当做了单选操作存储的数组只有一项时

    
        let rows=JSON.parse(window.sessionStorage.getItem("sceneTion"))
          if(rows!=null){
            this.datarows.push(rows)
               this.$nextTick(()=>{
                this.toggleSelection(this.datarows)
              })
    

    当没有做互斥单选操作,此时需要在请求到的数组中拿出勾选的数组this.tableData.filter过滤拿到的是available==ture表示被勾选状态

       let rows= this.tableData.filter(v=>v.available==true)
            //   if()
          if(rows!=null){
              this.datarows=rows
               this.$nextTick(()=>{
                this.toggleSelection(this.datarows)
              })
          }
    

    this.$nextTick表示在页面渲染完成时执行,如果不用在页面加载完成时效果不生效。

    更多相关内容
  • :data:数组 stripe:是否为斑马纹 table highlight-current-row:是否要高亮当前行 :header-cell-style:表头单元格的 style回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 :cell-...

    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>
    
    展开全文
  • 022_Table表格

    2022-02-26 22:37:28
    Function({row, column, rowIndex, columnIndex})/String 无 无 cell-style 单元格的style回调方法, 也可以使用一个固定的Object为所有单元格设置一样的Style。 Function({row, column, rowIndex, columnIndex})/...

    1. Table表格例子

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

    1.2. Table Attributes

    参数

    说明

    类型

    可选值

    默认值

    data

    显示的数据

    array

    height

    Table的高度, 默认为自动高度。如果height为number类型, 单位px; 如果height为string类型, 则这个高度会设置为Table的style.height的值, Table的高度会受控于外部样式。

    string/number

    max-height

    Table的最大高度。合法的值为数字或者单位为px的高度。

    string/number

    stripe

    是否为斑马纹table

    boolean

    false

    border

    是否带有纵向边框

    boolean

    false

    size

    Table的尺寸

    string

    medium / small / mini

    fit

    列的宽度是否自撑开

    boolean

    true

    show-header

    是否显示表头

    boolean

    false

    highlight-current-row

    是否要高亮当前行

    boolean

    false

    current-row-key

    当前行的key, 只写属性

    String,Number

    row-class-name

    行的className的回调方法, 也可以使用字符串为所有行设置一个固定的className。

    Function({row, rowIndex})/String

    row-style

    行的style的回调方法, 也可以使用一个固定的Object为所有行设置一样的Style。

    Function({row, rowIndex})/Object

    cell-class-name

    单元格的className的回调方法, 也可以使用字符串为所有单元格设置一个固定的className。

    Function({row, column, rowIndex, columnIndex})/String

    cell-style

    单元格的style的回调方法, 也可以使用一个固定的Object为所有单元格设置一样的Style。

    Function({row, column, rowIndex, columnIndex})/Object

    header-row-class-name

    表头行的className的回调方法, 也可以使用字符串为所有表头行设置一个固定的className。

    Function({row, rowIndex})/String

    header-row-style

    表头行的style的回调方法, 也可以使用一个固定的Object为所有表头行设置一样的Style。

    Function({row, rowIndex})/Object

    header-cell-class-name

    表头单元格的className的回调方法, 也可以使用字符串为所有表头单元格设置一个固定的className。

    Function({row, column, rowIndex, columnIndex})/String

    header-cell-style

    表头单元格的style的回调方法, 也可以使用一个固定的Object为所有表头单元格设置一样的Style。

    Function({row, column, rowIndex, columnIndex})/Object

    row-key

    行数据的Key, 用来优化Table的渲染; 在使用reserve-selection功能与显示树形数据时, 该属性是必填的。类型为String时, 支持多层访问: user.info.id, 但不支持user.info[0].id, 此种情况请使用Function。

    Function(row)/String

    empty-text

    空数据时显示的文本内容, 也可以通过slot="empty"设置

    String

    暂无数据

    default-expand-all

    是否默认展开所有行, 当Table包含展开行存在或者为树形表格时有效

    Boolean

    false

    expand-row-keys

    可以通过该属性设置Table目前的展开行, 需要设置row-key属性才能使用, 该属性为展开行的keys数组。

    Array

    default-sort

    默认的排序列的prop和顺序。它的prop属性指定默认的排序的列, order指定默认排序的顺序

    Object

    order: ascending, descending

    如果只指定了prop, 没有指定order, 则默认顺序是ascending

    tooltip-effect

    tooltipeffect属性

    String

    dark/light

    show-summary

    是否在表尾显示合计行

    Boolean

    false

    sum-text

    合计行第一列的文本

    String

    合计

    summary-method

    自定义的合计计算方法

    Function({ columns, data })

    span-method

    合并行或列的计算方法

    Function({ row, column, rowIndex, columnIndex })

    select-on-indeterminate

    在多选表格中, 当仅有部分行被选中时, 点击表头的多选框时的行为。若为true, 则选中所有行; 若为false, 则取消选择所有行

    Boolean

    true

    indent

    展示树形数据时, 树节点的缩进

    Number

    16

    lazy

    是否懒加载子节点数据

    Boolean

    load

    加载子节点数据的函数, lazy为true时生效, 函数第二个参数包含了节点的层级信息

    Function(row, treeNode, resolve)

    tree-props

    渲染嵌套数据的配置选项

    Object

    { hasChildren: 'hasChildren', children: 'children' }

    1.3. Table Events

    事件名

    说明

    参数

    select

    当用户手动勾选数据行的Checkbox时触发的事件

    selection, row

    select-all

    当用户手动勾选全选Checkbox时触发的事件

    selection

    selection-change

    当选择项发生变化时会触发该事件

    selection

    cell-mouse-enter

    当单元格hover进入时会触发该事件

    row, column, cell, event

    cell-mouse-leave

    当单元格hover退出时会触发该事件

    row, column, cell, event

    cell-click

    当某个单元格被点击时会触发该事件

    row, column, cell, event

    cell-dblclick

    当某个单元格被双击击时会触发该事件

    row, column, cell, event

    row-click

    当某一行被点击时会触发该事件

    row, column, event

    row-contextmenu

    当某一行被鼠标右键点击时会触发该事件

    row, column, event

    row-dblclick

    当某一行被双击时会触发该事件

    row, column, event

    header-click

    当某一列的表头被点击时会触发该事件

    column, event

    header-contextmenu

    当某一列的表头被鼠标右键点击时触发该事件

    column, event

    sort-change

    当表格的排序条件发生变化的时候会触发该事件

    { column, prop, order }

    filter-change

    当表格的筛选条件发生变化的时候会触发该事件, 参数的值是一个对象, 对象的key是column的columnKey, 对应的value为用户选择的筛选条件的数组。

    filters

    current-change

    当表格的当前行发生变化的时候会触发该事件, 如果要高亮当前行, 请打开表格的highlight-current-row属性

    currentRow, oldCurrentRow

    header-dragend

    当拖动表头改变了列的宽度的时候会触发该事件

    newWidth, oldWidth, column, event

    expand-change

    当用户对某一行展开或者关闭的时候会触发该事件(展开行时, 回调的第二个参数为expandedRows; 树形表格时第二参数为expanded)

    row, (expandedRows | expanded)

    1.4. Table Methods

    方法名

    说明

    参数

    clearSelection

    用于多选表格, 清空用户的选择

    toggleRowSelection

    用于多选表格, 切换某一行的选中状态, 如果使用了第二个参数, 则是设置这一行选中与否(selected为true则选中)

    row, selected

    toggleAllSelection

    用于多选表格, 切换所有行的选中状态

    toggleRowExpansion

    用于可展开表格与树形表格, 切换某一行的展开状态, 如果使用了第二个参数, 则是设置这一行展开与否(expanded为true则展开)

    row, expanded

    setCurrentRow

    用于单选表格, 设定某一行为选中行, 如果调用时不加参数, 则会取消目前高亮行的选中状态。

    row

    clearSort

    用于清空排序条件, 数据会恢复成未排序的状态

    clearFilter

    不传入参数时用于清空所有过滤条件, 数据会恢复成未过滤的状态, 也可传入由columnKey组成的数组以清除指定列的过滤条件

    columnKey

    doLayout

    对Table进行重新布局。当Table或其祖先元素由隐藏切换为显示时, 可能需要调用此方法

    sort

    手动对Table进行排序。参数prop属性指定排序列, order指定排序顺序。

    prop: string, order: string

    1.5. Table Slot

    name

    说明

    append

    插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作, 可能需要用到这个slot。若表格有合计行, 该slot会位于合计行之上。

    1.6. Table-column Attributes

    参数

    说明

    类型

    可选值

    默认值

    type

    对应列的类型。如果设置了selection则显示多选框; 如果设置了index则显示该行的索引(从1开始计算); 如果设置了expand则显示为一个可展开的按钮

    string

    selection/index/expand

    index

    如果设置了type=index, 可以通过传递index属性来自定义索引

    number, Function(index)

    column-key

    column的key, 如果需要使用filter-change事件, 则需要此属性标识是哪个column的筛选条件

    string

    label

    显示的标题

    string

    prop

    对应列内容的字段名, 也可以使用property属性

    string

    width

    对应列的宽度

    string

    min-width

    对应列的最小宽度, 与width的区别是width是固定的, min-width会把剩余宽度按比例分配给设置了min-width的列

    string

    fixed

    列是否固定在左侧或者右侧, true表示固定在左侧

    string, boolean

    true, left, right

    render-header

    列标题Label区域渲染使用的Function

    Function(h, { column, $index })

    sortable

    对应列是否可以排序, 如果设置为'custom', 则代表用户希望远程排序, 需要监听Table的sort-change事件

    boolean, string

    true, false, 'custom'

    false

    sort-method

    对数据进行排序的时候使用的方法, 仅当sortable设置为true的时候有效, 需返回一个数字, 和Array.sort表现一致

    Function(a, b)

    sort-by

    指定数据按照哪个属性进行排序, 仅当sortable设置为true且没有设置sort-method的时候有效。如果sort-by为数组, 则先按照第1个属性排序, 如果第1个相等, 再按照第2个排序, 以此类推

    String/Array/Function(row, index)

    sort-orders

    数据在排序时所使用排序策略的轮转顺序, 仅当sortable为true时有效。需传入一个数组, 随着用户点击表头, 该列依次按照数组中元素的顺序进行排序

    array

    数组中的元素需为以下三者之一: ascending表示升序, descending表示降序, null表示还原为原始顺序

    ['ascending', 'descending', null]

    resizable

    对应列是否可以通过拖动改变宽度(需要在el-table上设置border属性为真)

    boolean

    true

    formatter

    用来格式化内容

    Function(row, column, cellValue, index)

    show-overflow-tooltip

    当内容过长被隐藏时显示tooltip

    Boolean

    false

    align

    对齐方式

    String

    left/center/right

    left

    header-align

    表头对齐方式, 若不设置该项, 则使用表格的对齐方式

    String

    left/center/right

    class-name

    列的className

    string

    label-class-name

    当前列标题的自定义类名

    string

    selectable

    仅对type=selection的列有效, 类型为Function, Function的返回值用来决定这一行的CheckBox是否可以勾选

    Function(row, index)

    reserve-selection

    仅对type=selection的列有效, 类型为Boolean, 为true则会在数据更新之后保留之前选中的数据(需指定row-key)

    Boolean

    false

    filters

    数据过滤的选项, 数组格式, 数组中的元素需要有text和value属性。

    Array[{ text, value }]

    filter-placement

    过滤弹出框的定位

    String

    与Tooltip的placement属性相同

    filter-multiple

    数据过滤的选项是否多选

    Boolean

    true

    filter-method

    数据过滤使用的方法, 如果是多选的筛选项, 对每一条数据会执行多次, 任意一次返回true就会显示。

    Function(value, row, column)

    filtered-value

    选中的数据过滤项, 如果需要自定义表头过滤的渲染方式, 可能会需要此属性。

    Array

    1.7. Table-column Scoped Slot

    name

    说明

    自定义列的内容, 参数为{ row, column, $index }

    header

    自定义表头的内容.参数为{ column, $index }

    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 

    展开全文
  • //$watch是一个实例方法 //这里监听的是km的变化,当km变化时,就会响应 vm.$watch('km',function(newvalue,oldvalue){ //这个回调将在vm.km被改变后使用 //新的值写在前面,旧的写在后面 document.getElementById...

    前言:这个笔记主要内容为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会自动侦测并添加相应的前缀。

    展开全文
  • 文件数组上传

    千次阅读 2019-08-07 16:17:59
    1 思路 ...(4)将文件组织进入数组中,上传文件数组 2 代码片段 2.1 总体调用 var arr = []; var file_data_arr = []; arr.push( "file:///storage/emulated/0/Huawei/MagazineUnlock/ma...
  • 具体多久我也记不清楚了,春节放假比较早,所以就趁着有时间学习了一下iOS开发的基础知识 今天讲的iOS UITableView 配和block 回调实现列表删除教程 。那么废话不多说 ,我们正式开始。 准备工作 安装xcode 这个...
  • 的Face++ SDK进行身份证识别:它识别到身份证后会回调一个图片数据,我们用此图片向Face++公司的服务器请求验证,该请求通过则block回调成功,接着将图片数据保存到手机本地,然后在合适的时机(比如,点击“完成”...
  • 方法一: 直接通过element的table组件中的cell-click和cell-dbclick监听表格事件,回调函数有四个参数row, column, cell, event,可以拿这些参数做相应的筛选,然后使用操作dom的方法添加input达到更改值的作用,贴上原生...
  • 功能描述:基于element-ui的el-table改造,支持自增自定义列,修改当前列信息以及当前列的附加信息,支持修改当前行的信息以及校验,容错退数据。 接下来庖丁解牛 首先看一下我的自认为写的很low的改造的table 这...
  • //异步方法回调函数的形参位置 }); 以上,模拟了更新表单异步操作的监听过程。【 查看demo 】。 3.解绑 selector用 monkey patch 的方式实现方法监听,实质上是替换了原上下文的方法。所以销毁时,别忘...
  • 在上一篇文章的最后有说到在cell中带有UITextField的时候,在cell的复用机制下会有一些问题。关于这个问题的解决其实我们可以参照cell的复用机制。说的有点绕哈。。。 解决复用带来的问题,还是用复用的机制,确实挺...
  • * row 表格每一行的数据 * column 表格每一列的数据 * rowIndex 表格的行索引,不包括表头,从0开始 ...el-table :data="tableData" style="width: 100%" :row-style="isRed" @selection-change="select...
  • 相关属性: 1、row-class-name: 说明:行的 className 的回调方法,也可以使用字符串为所有行...说明:行的 style回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 类型:Function({row, row...
  • 方法:在子组件的js文件里加入一个自定义事件,父组件的WXML绑定自定义事件,父组件的js中写回调函数。 注意:自定义事件: this.triggerEvent("父组件自定义事件的名称",要传递的数据) 页面.js文件中存放...
  • 转眼就到了18年的最后一个月份了,想必大家 一定都在期待 新年的到来吧,那小编就先在这里提前祝大家新年快乐了 新年快乐 好了,上期我们有了解了...//把得到的json数据中的data数组转换为Student数组 +(NSArray > ...
  • iOS_JSON_XML_图片内存缓存_Block回调

    千次阅读 2014-06-23 09:17:23
    // 全局的数据数组 数组中的元素是video对象实例 @property (strong, nonatomic) NSMutableArray *dataList; // 1) 全局的字符串,记录每一个元素的完整内容,主要用于拼接 @property (strong, nonatomic) ...
  • Vue学习日记34

    2021-02-22 15:28:49
    通过provide/inject可以轻松实现跨级访问父组件的数据 17.lodash 解析:数组、集合、函数、语言、数学、数字、对象、Seq、字符串、实用函数、Properties、Methods: [1]遍历array、object和string [2]对值进行操作和...
  • 在move方法中,通过每一帧的渲染更新,回调函数处理this.translateY -= this.speed平移数据列表。 在splitData中则处理数据切割,判断如果不需要虚拟滚动时,则加载展示所有的数据。 随后监听了translateY的变化,...
  • 4. 添加、移除任务回调 【已完成】 4. 任务连接线 5. 任务自定义悬浮提示 6. 和所有你觉得需要用到的需求 在线演示 - GitHub wl-gantt 与市面应用较广的大佬型插件对比 wl-gantt 外观简洁清爽,非常简单易用,...
  • uni-app【多媒体API】

    千次阅读 2021-12-11 13:42:17
    longPressActions 参数说明 参数 类型 必填 说明 itemList Array 是 按钮的文字数组 itemColor String 否 按钮的文字颜色,字符串格式,默认为"#000000" success Function 否 接口调用成功的回调函数,详见返回参数...
  • } // else {//自定义初始化排序 看情况传入 //例如 // params.orderBy = 'avgSales' // params.desc = true // } this.$emit('sortChange', params) }, selectionChange(val) {// 表格checkbox 选择行回调 this.$...
  • element-ui el-table与el-form同用,并校验

    万次阅读 多人点赞 2019-08-28 00:03:10
    表头加* 1.el-table>添加 header-cell-class-name='required' 参数 说明 类型 可选值 默认值 header-cell-class-name 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 ...
  • // 传参并指定回调执行函数为onBack script.src = 'http://www.....:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回调执行函数 function onBack(res) { alert(JSON....
  • Vue.js

    2020-03-10 01:15:46
    () =>{ alert(this.message) },400) } } }) 事件修饰符 .stop阻止冒泡 .prevent阻止默认事件 .capture添加事情侦听器时使用事件捕获模式 .self只当事件在该元素本身(比如不是子元素)触发时触发回调 .once事件只...
  • @param completed 错误信息回调 */ - (void)expandAllNodes:(ZFJNodeModel *)model completed:(void(^)(ZFJError *error))completed; /** 展开/折叠某个节点的下一级子节点 @param model 节点model(需要展开/...
  • vue和element-ui初步使用

    2020-04-01 21:13:13
    Function({row, column, rowIndex, columnIndex})/String — — header-cell-style 表头单元格的 style回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, column, ...
  • 但是他麻烦就麻烦在,点击加载更多的时候,需要tableView来刷新列表,那么这个footView中没有tableView,用到其他view的组件,所以就用到了回调,楼主用的是委托回调 所以在声明文件中声明一个协议 @...
  • JavaScript-API-2-笔记

    2021-04-21 13:28:09
    fn回调函数:回调函数。 滑动 下拉 slideDown([speed定义速度],[easing运动轨迹],[fn回调函数]); speed定义速度:有三种预定义(slow、normal、fast)或者表示动画时长的毫秒数值。 easing运动轨迹:指切换运动曲线...
  • 解决方案: 官方文档 validateField支持数组,并且它的回调函数是每个元素调一次。如果想实现需求中的校验全部项是否都配置完毕就需要用到Pr 20-Vue实战项目:电商管理系统(Element-UI)--vue ui没有反应 20-Vue...
  • ④另外,即使不在require的回调函数加入参数NestedSort,也可以正常使用代码来进行排序。但若不在grid的modules项加入,则不能通过点击表头来多重排序     (50)获取单元格的行id和列id 假设该单元格...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,984
精华内容 1,593
关键字:

cell-style回调数组