element-datatable

一款基于element-ui的表格插件秕磷，支持所有element-ui的屬性和方法掀虎，可以接受本地數(shù)據(jù)和ajax參數(shù)異步請求服務器數(shù)據(jù)

A form plug-in based on element-ui that supports the properties and methods of all element-ui and can accept local data or ajax parameter asynchronous request server data

相關依賴 Dependencies

• axios, element-ui, qs
• IE >= 9

基本用法 Build Setup

• 安裝 install

npm i element-datatable -S

• 在項目中引入element-ui依賴,參見http://element.eleme.io. 引入element相關的css等文件.

• 使用本地數(shù)據(jù) use local data

<template>
  <div id="app">
    <element-datatable :column-attributes="columnAttributes" :data="tableData" />
  </div>
</template>

<script>
import { ElementDatatable  } from '@/components'

export default {
  name: "App",
  components: {
    ElementDatatable
  },
  data() {
    return {
      tableData: [
        {
          date: '2018-09-30',
          content: '123',
          isDelay: false,
          delayReason: '',
          checked: true
        }
      ],
      columnAttributes: [ // columnAttributes里面的屬性與table-column attributes 一致, 但是采用小駝峰命名
        { label: "序號", type: 'index', width: '50', align: 'center' },
        { type: 'selection', align: 'center', width: 55 },
        { label: '日期', prop: 'date', width: '120', align: 'center', sortable: true },
        { label: '工作內容', prop: 'content', headerAlign: 'center', },
        { label: '工期是否延誤', prop: 'isDelay', headerAlign: 'center', width: 130 },
        { label: '延誤原因', prop: 'delayReason', headerAlign: 'center' }
      ]
    }
  }
}
</script>

• 使用ajax獲取數(shù)據(jù) get data by ajax

<template>
  <div id="app">
    <element-datatable :column-attributes="columnAttributes" :ajax="ajax" />
  </div>
</template>

<script>
import ElementDatatable from './components'

export default {
  name: "App",
  components: {
    ElementDatatable
  },
  data() {
    return {
      tableData: [
        {
          date: '2018-09-30',
          content: '123',
          isDelay: false,
          delayReason: '',
          checked: true
        }
      ],
      columnAttributes: [
        { label: "序號", type: 'index', width: '50', align: 'center' },
        { type: 'selection', align: 'center', width: 55 },
        { label: '日期', prop: 'date', width: '120', align: 'center', sortable: true },
        { label: '工作內容', prop: 'content', headerAlign: 'center', },
        { label: '工期是否延誤', prop: 'isDelay', headerAlign: 'center', width: 130 },
        { label: '延誤原因', prop: 'delayReason', headerAlign: 'center' }
      ],
      ajax: { // 支持傳入完整的ajax對象
        url: '',
        method: '',
        headers: {},
        params: {},
        data: {}
      }
    }
  }
}
</script>

有關el-table和el-table-column使用方法泳炉，請參考element-ui相關說明

其它功能 Other property & event

• 支持所有的el-table、el-table-column屬性、事件和方法.

• checked-prop
  僅在tyep="selection"時有效，該屬性接收一個字符串指定某一屬性或方法，通過驗證數(shù)據(jù)的指定屬性值確認是否選中該條數(shù)據(jù)围苫；方法接收兩個參數(shù)(row, index), 通過返回true或false指定該數(shù)據(jù)是否選中

• selectAbleProp
  僅在tyep="selection"時有效裤园，該屬性接收一個字符串指定某一屬性，通過驗證數(shù)據(jù)的該屬性值判斷是否可選剂府，作用與el-table-column的selectable屬性相同拧揽。

ElementDatatable Attributes

ElementDatatable Events

ElementDatatable Methods

ElementDatatable Slot

slot
slot name=“first”