V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
reming0227
V2EX  ›  分享创造

小型的表格插件

  •  
  •   reming0227 · 2019-08-05 17:08:45 +08:00 · 1486 次点击
    这是一个创建于 1928 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Vue-Table-Form

    小型的表格插件,喜欢的点个 star

    Github 地址: https://github.com/reming0227/vue-table-form

    📦 Installation

    npm install vue-table-from --save
    yarn add vue-table-from
    

    🔨 Usage

    <vue-table :data="list" :columns="columns" :select_event="event"></vue-table>
    
    import VueTable from 'vue-table-from';
    new Vue(
      data: {
        columns: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Sex',
          key: 'sex'
        },
        {
          title: 'Contry',
          key: 'country'
        },
        {
          title: 'Authority',
          key: 'select',
          type: 'switch',
          event: function (state, row) {
            console.log(state, row);
          }
        }],
        list: [{
          name: 'Row',
          age: 'xxx',
          sex: 'Male',
          country: 'China',
          switch: {
            color: 'red',
            value: true
          }
        },
        {
          name: 'Row',
          age: 'xxx',
          sex: 'Male',
          country: 'China',
          switch: {
            color: 'purple',
            value: false
          }
        },
        {
          name: 'Row',
          age: 'xxx',
          sex: 'Male',
          country: 'China',
          switch: {
            color: 'yellow',
            value: false
          }
        },
        {
          name: 'Row',
          age: 'xxx',
          sex: 'Male',
          country: 'China',
          switch: {
            color: 'green',
            value: false
          }
        },
        {
          name: 'Row',
          age: 'xxx',
          sex: 'Male',
          country: 'China',
          switch: {
            color: '#108ee9',
            value: true
          }
        }]
      },
      components: {
        VueTable
      },
      methods: {
        event (selects) {
          console.log(selects);
        }
      }
    })
    

    🎬 Preview

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1038 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:13 · PVG 06:13 · LAX 14:13 · JFK 17:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.