vue-vtable-grid v1.0.1

Vue-Vtable-Grid

• 😊 基于 Vue 2.0 开发；
• 👍 使用 VTable

安装

npm i vue-vtable-grid -S
# OR
yarn add vue-vtable-grid -S

全局使用

// main.js
import Vue from 'vue';
import App from './App.vue';
// ...
import vueVtableGrid from 'vue-vtable-grid';
Vue.use(vueVtableGrid);
// ...
new Vue({
  el: '#app',
  render: (h) => h(App),
});

<template>
  <div id="app">
    <vue-vtable-grid
      ref="table"
      @click-cell="clickCell"
      :records="records"
      :columns="columns"
      :options="options"
    />
  </div>
</template>

<script>
const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing',
  }));
};
export default {
  name: 'App',
  components: {
    // vtableGrid,
  },
  data() {
    return {
      records: [],
      columns: [
        {
          field: 'id',
          title: 'ID ff',
          width: '1%',
          minWidth: 200,
          sort: true,
        },
        {
          field: 'email1',
          title: 'email',
          width: 200,
          sort: true,
        },
        {
          field: 'date1',
          title: 'birthday',
          width: 200,
        },
        {
          field: 'sex',
          title: 'sex',
          width: 100,
        },
        {
          field: 'tel',
          title: 'telephone',
          width: 150,
        },
        {
          field: 'work',
          title: 'job',
          width: 200,
        },
        {
          field: 'city',
          title: 'city',
          width: 150,
        },
      ],
      options: {},
    };
  },
  methods: {
    clickCell(obj) {
      console.log(obj);
    },
  },
  created() {
    this.records = generatePersons(100000);
    this.options = {
      dragHeaderMode: 'all',
    };
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>

局部引入

基本用法

<template>
  <div id="app">
    <vue-vtable-grid
      ref="table"
      @click-cell="clickCell"
      :records="records"
      :columns="columns"
      :options="options"
    />
  </div>
</template>

<script>
import vueVtableGrid from 'vue-vtable-grid';
const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => ({
    id: i + 1,
    email1: `${i + 1}@xxx.com`,
    name: `小明${i + 1}`,
    lastName: '王',
    date1: '2022年9月1日',
    tel: '000-0000-0000',
    sex: i % 2 === 0 ? 'boy' : 'girl',
    work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer',
    city: 'beijing',
  }));
};
export default {
  name: 'App',
  components: {
    vueVtableGrid,
  },
  data() {
    return {
      records: [],
      columns: [
        {
          field: 'id',
          title: 'ID ff',
          width: '1%',
          minWidth: 200,
          sort: true,
        },
        {
          field: 'email1',
          title: 'email',
          width: 200,
          sort: true,
        },
        {
          field: 'date1',
          title: 'birthday',
          width: 200,
        },
        {
          field: 'sex',
          title: 'sex',
          width: 100,
        },
        {
          field: 'tel',
          title: 'telephone',
          width: 150,
        },
        {
          field: 'work',
          title: 'job',
          width: 200,
        },
        {
          field: 'city',
          title: 'city',
          width: 150,
        },
      ],
      options: {},
    };
  },
  methods: {
    clickCell(obj) {
      console.log(obj);
    },
  },
  created() {
    this.records = generatePersons(100000);
    this.options = {
      dragHeaderMode: 'all',
    };
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
</style>

属性

事件

详细参数见：Events

方法

详细参数见：Methods