vill-table

a vue plugins about table

Build Setup

install the plugin on bash

npm install vill-table --save-dev

register the plugins on the vue project in the entry file (main.js)

import Table from 'vill-table'
Vue.use(Table);

on the vue template file ,you can use it by the follow example

<template>
    <div class="demo">
        <vill-table :columns="columns5" :data="data5"></vill-table>
    </div>
</template>

<script>
export default {
  data() {
    return {
      columns5: [
        {
          title: "Date",
          key: "date"
          // sortable: true
        },
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age",
          sortable: true
        },
        {
          title: "Address",
          key: "address"
        },
        {
          title: "Action",
          key: "action",
          align: 'center',
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  textAlign: params.align
                }
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.show(params.index);
                      }
                    }
                  },
                  "View"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.index);
                      }
                    }
                  },
                  "Delete"
                )
              ]
            );
          }
        }
      ],
      data5: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
    };
  },
  methods: {
    remove(params) {
      console.log(params);
    },
    show(params) {
      console.log(params);
    }
  }
};
</script>

<style>
</style>

输入字段

字段	说明	类型	默认值
columns	表格头部数据	-	-
data	每一行数据	-	-
## columns属性
字段	说明	类型	默认值
---------	-----------------	-------	------
title	表头title值	String	-
key	表头title的唯一key	String	-
sortable	是否显示排序(true/false)	Boolean	-
render	渲染函数	Function	可以自定义渲染内容
## License

MIT