lb-element-table基于 Element UI Tabel 封装的表格组件

由于项目中频繁用到表格组件,所以自己基于Element Table 进行二次封装的一个Table组件,
方便日常使用,无缝支持Element Table的所有功能参数及事件,欢迎体验!

Github

点击前往

更多示例及参考

点击前往

简单示例参考

<template>
  <lb-table :column="tableData.column"
    :data="tableData.data">
  </lb-table>
</template>

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

预览

image

评论

  1. 山上
    Windows Chrome
    3年前
    2019-4-26 9:53:20

    谢谢分享,这个组件太实用了

  2. HduSy
    Windows Firefox
    2年前
    2019-6-19 18:31:06

    如果tableData,column动态切换呢

    • LiuBing博主
      Windows Chrome
      2年前
      2019-6-20 11:21:31

      表格数据动态切换没有问题,表头数据动态切换会存在一些问题,可以用下面的方法临时解决:
      增加一个showTable控制表格的显示,默认为true,切换表头后先将showTable变成false,然后异步再变成true,表格因为会重新渲染所以会闪烁一下。

      <lb-table v-if="showTable"></lb-table>
      // 切换表头
      changeColumn () {
        this.column = newColumn
        this.showTable = false
        setTimeout(() => {
            this.showTable = true
        }, 0)
      }
      
  3. 你好
    Macintosh Chrome
    2年前
    2019-9-30 17:57:19

    能不能加上插槽

    • LiuBing博主
      Windows Chrome
      2年前
      2019-10-08 10:38:44

      暂不支持插槽

发送评论编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇