element ui table的所有属性

1. table 的props:

      data: {
        type: Array,
        default: function() {
          return [];
        }
      },

      size: String,

      width: [String, Number],

      height: [String, Number],

      maxHeight: [String, Number],

      fit: {
        type: Boolean,
        default: true
      },

      stripe: Boolean,

      border: Boolean,

      rowKey: [String, Function],

      context: {},

      showHeader: {
        type: Boolean,
        default: true
      },

      showSummary: Boolean,

      sumText: String,

      summaryMethod: Function,

      rowClassName: [String, Function],

      rowStyle: [Object, Function],

      cellClassName: [String, Function],

      cellStyle: [Object, Function],

      headerRowClassName: [String, Function],

      headerRowStyle: [Object, Function],

      headerCellClassName: [String, Function],

      headerCellStyle: [Object, Function],

      highlightCurrentRow: Boolean,

      currentRowKey: [String, Number],

      emptyText: String,

      expandRowKeys: Array,

      defaultExpandAll: Boolean,

      defaultSort: Object,

      tooltipEffect: String,

      spanMethod: Function,

      selectOnIndeterminate: {
        type: Boolean,
        default: true
      },

      indent: {
        type: Number,
        default: 16
      },

      treeProps: {
        type: Object,
        default() {
          return {
            hasChildren: ‘hasChildren‘,
            children: ‘children‘
          };
        }
      },

      lazy: Boolean,

      load: Function

2. table column的props

props: {
    type: {
      type: String,
      default: ‘default‘
    },
    label: String,
    className: String,
    labelClassName: String,
    property: String,
    prop: String,
    width: {},
    minWidth: {},
    renderHeader: Function,
    sortable: {
      type: [Boolean, String],
      default: false
    },
    sortMethod: Function,
    sortBy: [String, Function, Array],
    resizable: {
      type: Boolean,
      default: true
    },
    columnKey: String,
    align: String,
    headerAlign: String,
    showTooltipWhenOverflow: Boolean,
    showOverflowTooltip: Boolean,
    fixed: [Boolean, String],
    formatter: Function,
    selectable: Function,
    reserveSelection: Boolean,
    filterMethod: Function,
    filteredValue: Array,
    filters: Array,
    filterPlacement: String,
    filterMultiple: {
      type: Boolean,
      default: true
    },
    index: [Number, Function],
    sortOrders: {
      type: Array,
      default() {
        return [‘ascending‘, ‘descending‘, null];
      },
      validator(val) {
        return val.every(order => [‘ascending‘, ‘descending‘, null].indexOf(order) > -1);
      }
    }
  }

原文地址:https://www.cnblogs.com/lhuser/p/11263288.html

时间: 2024-11-07 16:37:53

element ui table的所有属性的相关文章

element ui table组件自定义合计栏,后台给的数据

合计的数据是后台传的,所以用table组件自定义一行用来合计 <el-table border fit v-loading.body="listLoading" element-loading-text="拼命加载中" :data="getChannelData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}&q

vue+element ui table组件封装,使用render渲染

后台管理经常会用到表格,一开始封装了一个常用的功能性表格,点击这里: 后来由于需求增加,在表格中还会用到switch,select,input等多种组件,每次都要在html中增加<el-table-column></el-table-column>, 维护起来相当麻烦,就想到了使用render渲染. 组件内部封装代码: <template> <el-table :data="tableData" size="medium"

element ui table单选框点击全选问题

<template slot-scope="scope"> <el-radio-group v-model="scope.row.HandleState" size="small"> <el-radio :label="0" @change="operation(scope.row, RepairOrChangeListTwo[0].value,scope.row.ID)"&g

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理

最近项目需求需要,需要对表格列进行自定义排序,用的是iview的组件,看了文档,table 排序这部分,但是没有给出相关例子.以为不难搞的,是不难搞,就是折腾了好一会... Iview table 排序 data () { return { columns5: [ { title: 'Date', key: 'date', sortable: true, }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age', sortable

vue2.0 + element ui 后台管理系统

vue2.0 和 elementui  搭建的一个后台管理系统 概述: 这是一个用vuejs2.0和element搭建的后台管理界面. 技术栈: vue2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element ui:基于vue2.0的ui组件库. vue-router:一般单页面应用spa都要用到的前端路由. vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式. webpack + es6/7 + less mock.js : 相

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

element ui改写实现两棵树

使用element ui组件库实现一个table的两棵树的效果 效果如下,左边树自动展开一级,右边树默认显示楼层,然后可以一个个展开 代码如下 <el-table :data="relativeData" :fit="isFit" height="700px" :row-style="showTr" :row-class-name="tableRowClassName" :header-row-cla

Vue框架Element UI教程(二)

原文:https://www.jianshu.com/p/1704b5935a8 [时间选择器] Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 前一篇已经安装好了Element UI环境,现在开始来实际操作框架提供的一些组件的运用了. 在准备好以下文章里面的内容