@agggin/vue-easytable v0.0.5

Table props

columns（Table props）

table-data（Table props）

table 表格数据，通过设置一些特殊属性实现某些功能，如 checkbox 多选功能

Table Event（注意传入的‘事件名称’必须和api保持一致）

Table Methods

<template>
     <div class="p-test">
       <template v-if="isBrowser">
         <v-table
           ref="table"
           class="erp-table"
           is-horizontal-resize
           column-width-drag
           :height="600"
           style="width:100%"
           :columns="columns"
           :table-data="tableData"
           :row-click="clickHandle"
           :row-dblclick="clickHandle"
           :column-cell-class-name="columnCellClass"
           row-hover-color="#eee"
           :cell-edit-done="cellEditDone"
           :select-all="testSelect"
           :select-change="testSelect"
           :drag-done="dragDoneHandle"
           @on-custom-comp="customCompHandle"
           :select-group-change="testSelect"
           row-click-color="#edf7ff"></v-table>
       </template>
     </div>
   </template>
   <script type="es6">
     import {getConfig, getData} from '../api'
     import UMenu from '@/components/UMenu'
     import {initComponent} from '@/utils'
     import Vue from 'vue'
     import {config, itemSources} from '../mock'

     function filterConfig (config) {
       let exportConfig = [
         {width: 60, titleAlign: 'center', columnAlign: 'center', isReadonly: true, type: 'selection'},
         {width: 40, titleAlign: 'center', columnAlign: 'center', isReadonly: true, title: '操作', componentName: 'op-menus'},
         {width: 30, titleAlign: 'center', columnAlign: 'center', isReadonly: true, title: '出', componentName: 'out-btn'},
         {width: 30, titleAlign: 'center', columnAlign: 'center', isReadonly: true, title: '入', componentName: 'in-btn'},
         {width: 30, titleAlign: 'center', columnAlign: 'center', isReadonly: true, title: '报', componentName: 'post-btn'}]
       config.forEach(item => {
         if (item.IsShow === false) {
           return true
         }
         exportConfig.push({
           field: item.BindField,
           title: item.CTitle,
           width: item.ColumnWidth,
           isReadonly: !item.IsReadonly,
           className: '',
           isRequired: item.IsRequired,
           dataType: item.DataType
         })
       })
       return exportConfig
     }

     export default {
       async asyncData () {
       },
       data () {
         return {
           columns: [],
           tableData: [],
           selected: false,
           isBrowser: false,
           totalCount: 0,
           pageSize: 1,
           pageIndex: 1
         }
       },
       computed: {
         systemList () {
           return _.filter(this.columns, item => item.isSystem)
         }
       },
       methods: {
         testSelect () {},
         columnCellClass (rowIndex, columnName, rowData) {
           if (this.systemList.includes(columnName)) {
             console.log(columnName)
           }
         },
         cellEditDone (newValue, oldValue, rowIndex, rowData, field) {
           let data = this.tableData[rowIndex]
           data[field] = newValue
           this.$set(this.tableData, rowIndex, data)
           // 接下来处理你的业务逻辑，数据持久化等...
         },
         pageChange (pageIndex) {
           this.pageIndex = pageIndex
           this.getData()
         },
         pageSizeChange (pageSize) {
           this.pageIndex = 1
           this.pageSize = pageSize
           this.getTableData()
         },
         customCompHandle (e) {
         },
         async getResultList () {
           this.pageIndex = 1
           this.pageSize = 20
           this.totalCount = 20
           this.tableData = itemSources
         },
         async getConfig () {
           this.columns = filterConfig(config)
         },
         clickHandle(rowIndex, rowData, column) {
         },
         dragDoneHandle(e) {
           console.log(this.$refs.table.editRows, 'edit')
         }
       },
       created () {
       },
       components: {},
       mounted () {
         this.isBrowser = true
         this.getConfig()
         this.getResultList()
       }
     }

     function componentFactory (name, type, options) {
       let render = function(h) {
         return h('a', {
           'class': [name, type],
           on: {
             click: () => {
               this.$emit('on-custom-comp', {
                 name,
                 rowData: this.rowData,
                 field: this.field,
                 index: this.index
               })
             }
           }
         }, options.btnTxt)
       }
       let config = {
         render,
         props: {
           rowData: {
             type: Object
           },
           field: {
             type: String
           },
           index: {
             type: Number
           }
         }
       }
       return config
     }

     Vue.component('out-btn', componentFactory('out-btn', 'btn', {
       btnTxt: '出'
     }))
     Vue.component('in-btn', componentFactory('in-btn', 'btn', {
       btnTxt: '入'
     }))
     Vue.component('post-btn', componentFactory('post-btn', 'btn', {
       btnTxt: '报'
     }))
     Vue.component('op-menus', initComponent(UMenu, {
       config: [
         {
           title: '询价',
           name: 'inquiry'
         }, {
           title: '销售备货',
           name: 'xs'
         }, {
           title: '采购订货',
           name: 'cg'
         }, {
           title: '删除库存',
           name: 'delete'
         }
       ]
     }))
   </script>
   <style lang="scss">
     .erp-table {
       .v-table-body-cell {
         font-size: 12px;
         box-sizing: border-box;
         line-height: 26px;
         input {
           outline: none;
           border: none;
           background: none;
         }
       }
       .v-table-header-row {
         background-color: #e7f1fb;
         font-size: 12px;
       }
       .btn {
         cursor: pointer;
       }
     }
   </style>