vue free table

vue-free-table

基於element ui table 二次封裝，幾乎支援原table 所有的功能

文件使用

DEMO預覽

特性

• 以element-ui table 為基礎進行二次封裝，減少程式碼量
• 繼承element-ui table 組件的參數及事件
• 支援render渲染
• 支援slot插槽
• 支援組件引入
• 支援樹形數據
• 支援分頁功能

文件

屬性	說明	類型	預設
data	table 的data屬性	Array	[]
column	用於控製表格列渲染	Array	[]
columns-props	用來定義所有column公共的屬性	Object
pagination	是否顯示分頁元件, 具體詳細請看pagination配置欄目	Boolean	false

只是在Element Table 封裝了一層，原本設定在Table 上的props 與事件監聽和設定都可以直接綁定到元件上，具體配置可參考Element Tabel 文檔

column 配置column 用於控製表格的列行為, 設定範例：

 const column = [
  { label : '日期' , prop : 'date' , width : 100 } ,
  { label : '姓名' , prop : 'name' } ,
  { label : '邮编' , prop : 'zip' } ,
  {
    label : '地址' ,
    prop : 'address' ,
    render : ( h , scope ) => {
      return ( < el-tag > { scope . row . address } < el-tag > )
    }
  } ,
  {
    label : '组件' ,
    prop : 'cmp' ,
    component : EditBtn ,
    listeners : {
      'row-edit' ( row ) {
        console . log ( 'row-edit' , row )
      }
    }
  }
]

columns-props配置columns-props用於配置columns 各列預設的props 屬性，

 const columnsProps = {
  align : 'left' ,
  minWidth : 120
}

pagination設定pagination用於控制顯示分頁元件, pagination分頁元件是繼承el-pagination的二次封裝，來源開源專案中的vue-element-admin 元件庫中分頁元件

參數	說明	類型	預設值
total	總條目數	Number	/
page	當前頁數支援.sync修飾符	Number	1
limit	每頁顯示條目個數，支援.sync修飾符	Number	20
page-sizes	每頁顯示個數選擇器的選項設置	Number[]	[10, 20, 30, 50]
hidden	是否隱藏	Boolean	false
auto-scroll	分頁之後是否自動捲動到頂部	Boolean	true

其它Element 的el-pagination支援的屬性，它也都支援。詳情請見文檔

範例

 < template >
  < free-table border stripe : data = "data" : column = "column" > </ free-table >
</ template >

< script >
import FreeTable from '@/components/FreeTable'

export default {
  components : {
    FreeTable
  } ,
  data ( ) {
    return {
      column : [
        { label : '日期' , prop : 'date' } ,
        { label : '姓名' , prop : 'name' } ,
        { label : '省份' , prop : 'province' } ,
        { label : '市区' , prop : 'city' } ,
        { label : '地址' , prop : 'address' }
      ] ,
      data : [
        {
          date : '2016-05-03' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        } ,
        {
          date : '2016-05-02' ,
          name : '王小虎' ,
          province : '上海' ,
          city : '普陀区' ,
          address : '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
< / script>

建置命令

 # 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint