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

小型的表格插件

  •  
  •   reming0227 · 107 天前 · 674 次点击
    这是一个创建于 107 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    目前尚无回复
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1024 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 21ms · UTC 19:29 · PVG 03:29 · LAX 11:29 · JFK 14:29
    ♥ Do have faith in what you're doing.