0.3.9 • Published 5 years ago

znl-table v0.3.9

Weekly downloads
-
License
-
Repository
-
Last release
5 years ago

znl-table

表格组件


下载

npm install znl-table --save

引入

import ZnlTable from 'znl-table';
Vue.component('znl-table', ZnlTable);

例子

基本用法

:::demo 基本用法

<div class="znl-content">
  <znl-table :columns="columns"
             :item-source="tableData"
             :loading="loading"
             :pageIndex="pageIndex"
             :showCheck="true"
             :search-fields="test"
             :on-page-changed="onPageChanged"
             :total-count="3000"
             :totalField="['UsableQty', 'InvQty']"
             @on-config-save="test"
             @click-link="clickLinkHandle"
             @current-row-change="currentRowChangeHandle"
             @select-change="selectChange"
             checkboxBindingKey="ID"
             gridtype="action"
             ref="table"
             :height="400">
  </znl-table>
</div>

<script>
  var config = [{
    'GCGuid': '430183ac-378f-40fa-bd13-34920a2b6a34',
    'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
    'CTitle': '库存GUID',
    'BindField': 'StkGUID',
    'IsShow': false,
    'IsReadonly': false,
    'ColumnWidth': 80,
    'DisplayIndex': 0,
    'DataType': 1,
    'IsSystem': true,
    'IsRequired': false,
    'TableName': 'STK_Stock',
    'ExtenValue': '{}',
    'TableField': 'StkGUID'
  },
    {
      'GCGuid': 'f10357de-40f7-476e-b72a-d9e85e1fdf15',
      'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
      'CTitle': '图片',
      'BindField': 'StockImage',
      'IsShow': true,
      'IsReadonly': true,
      'ColumnWidth': 35,
      'DisplayIndex': 1,
      'DataType': 1,
      'IsSystem': false,
      'IsRequired': false,
      'TableName': 'STK_Stock',
      'ExtenValue': '{"cellColors":[]}',
      'TableField': 'StockImage'
    },
    {
      'GCGuid': '8fc546be-e808-4bfd-a527-4a1a67a50c01',
      'PGGuid': '7c431e50-48b4-4766-8d5a-a534f9b1dcf7',
      'CTitle': '型号',
      'BindField': 'Model',
      'IsShow': false,
      'IsReadonly': false,
      'ColumnWidth': 150,
      'DisplayIndex': 2,
      'DataType': 1,
      'IsSystem': false,
      'IsRequired': true,
      'TableName': 'STK_Stock',
      'ExtenValue': null,
      'TableField': 'Model',
      'IsUpperCase': true
    }]
  var itemSources = [{
    'HaveContactInfo': false,
    'ModelCount': 0,
    'IsAddSpot': false,
    'TotalCostAmount': 0,
    'TotalSalesAmount': 0,
    'RowNumber': 0,
    'SID': 449029,
    'StkGUID': 'a80a93ff-4548-498d-89ad-e871ba84c65e',
    'Model': 'LPLPLP',
    'Brand': 'ST',
    'Packaging': 'SOP',
    'MakeYear': '18+',
    'MPQ': 'SOP',
    'InvType': '补货',
    'InvQty': 100,
    'BuyPrice': 0,
    'SalesPrice': '1.941748',
    'FollowPrice': '',
    'Unit': '片',
    'UsableQty': 100,
    'StorageName': '3',
    'MarkingCode': '',
    'Explain': '',
    'StkInTime': '2018/10/26',
    'BuyerName': '',
    'UpdatedByName': 'Mr.an',
    'UpdatedTime': '2018-10-26 16:27:24',
    'InvPosition': ''
  },
    {
      'HaveContactInfo': false,
      'ModelCount': 0,
      'IsAddSpot': false,
      'TotalCostAmount': 0,
      'TotalSalesAmount': 0,
      'RowNumber': 0,
      'SID': 449017,
      'StkGUID': '5465adb8-3a2f-4342-959f-fe297303535a',
      'Model': 'LPLPLP',
      'Brand': 'ST',
      'Packaging': 'SOP',
      'MakeYear': '18+',
      'MPQ': 'SOP',
      'Quality': '原装',
      'InvType': '补货',
      'InvQty': 0,
      'BuyPrice': 0,
      'SalesPrice': '1.941748',
      'Unit': '片',
      'UsableQty': 0,
      'BuyerName': '',
      'UpdatedByName': 'Mr.an',
      'UpdatedTime': '2018-10-26 16:25:46',
      'InvPosition': ''
    }]
  export default {
    data () {
      return {
        columns: [],
        tableData: [],
        pageIndex: 1,
        loading: false,
        showSearch: true,
        isSettingDialogShow: true,
        config
      }
    },
    methods: {
      searchModel (params) {
        console.log(params)
      },
      addRow () {
        let data = this.$refs.table.getActiveRow()
        console.log(data, 'data')
      },
      delRow () {
        this.$refs.table.getChangeConfig()
      },
      addLine () {
        this.showSearch = !this.showSearch
      },
      test (e) {
        console.log(e)
      },
      clickLinkHandle (e) {
        console.log(e, 'event')
      },
      onPageChanged (e) {
        this.pageIndex = e
      },
      selectChange (e) {
        // console.log(e)
      },
      currentRowChangeHandle (event) {
        console.log(event, 'currentRowChangeHandle')
      }
    },
    computed: {},
    mounted () {
      let tempConfig = [
        {
          title: '自定义组件',
          width: 100,
          canSearch: false,
          componentName: 'test1',
          isFrozen: true,
          component: {
            template: `<div>test</div>`,
            props: {
              rowData: {
                type: Object
              },
              field: {
                type: String
              },
              index: {
                type: Number
              }
            },
            methods: {
              update () {
                // 参数根据业务场景随意构造
                let params = {
                  type: 'edit',
                  index: this.index,
                  rowData: this.rowData,
                  event: 'click-link',
                }
                this.$emit('on-custom-comp', params)
              },

              deleteRow () {
                // 参数根据业务场景随意构造
                let params = {type: 'delete', index: this.index}
                this.$emit('on-custom-comp', params)

              }
            }
          }
        },
        {
          width: 40,
          type: 'panel',
          title: '面板',
          isFrozen: true,
          canSearch: false,
          classNames: ['el-icon-picture', 'el-icon-picture-outline'],
          status (rowData) {
            return 0
          },
          render(rowData,rowIndex, field) {
            let str = ''
            _.map(rowData, (value, key) => {
              str += `<div>${key}: ${value}</div>`
            })
            return str
          }
        },
        {
          width: 40,
          type: 'menus',
          isDeal: false,
          isFrozen: true,
          canSearch: false,
          title: '操作',
          config: [
            {
              title: '询价',
              name: 'Inquiry',
              click: row => {
                console.log('1')
              }
            },
            {
              title: '销售备货',
              name: 'StkReserve',
              click: row => {
                console.log('2')
              }
            },
            {
              title: '采购订货',
              name: 'StkPurchase',
              click: row => {
                console.log('3')
              }
            },
            {
              title: '删除库存',
              name: 'DelStock',
              click: row => {
                console.log('4')
              }
            }
          ]
        },
        {
          width: 40,
          type: 'button',
          title: '出',
          btnTxt: '出',
          canSearch: false,
          isDeal: false,
          click: row => {
            return true
          }
        }
      ]
      _.extend(config[_.findIndex(config, item => item.BindField === 'Packaging')], {
        type: 'select',
        width: 100,
        detail: 'test',
        options: [
          {
            key: '原装',
            value: '原装'
          }]
      })
      _.extend(config[_.findIndex(config, item => item.BindField === 'StockImage')], {
        type: 'icon',
        canSearch: false,
        classNames: ['el-icon-picture', 'el-icon-picture-outline'],
        status (row) {
          return 0
        },
        click (row) {
          console.log(row)
        }
      })
      _.extend(config[_.findIndex(config, item => item.BindField === 'SalesPrice')], {
        isReadOnly: true,
        event: 'click-link',
        className: 'v-link',
      })
      this.columns = tempConfig.concat(config)
      setTimeout(() => {
        this.tableData = itemSources
        this.$refs.table.init()
      }, 200)
    }
  }
</script>
<style>
  .znl-content {
    width: 100%;
    height: 400px;
    box-sizing: border-box;
  }
  body {
    margin: 0;
  }

  .v-link > .v-table-body-cell span {
    cursor: pointer;
    color: #0092dd;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
  .v-display-none {
    display: none !important;
  }
</style>

:::

组件内事件

方法名参数说明
init表格初始化
getEditList获取列表当前编辑过的行
getCheckList获取当前选中的行的下标
cleanEdit清除编辑过的行的样式
cleanAllCheck清除选中行
addRow新增行数(可选)新增一行
delRow删除选中行

列配置参数

属性名可传参数/默认值类型说明
widthNumber宽度,数字类型
typeselection/buttonString单元格类型
titleString列标题
dataTypeNumber单元格字段的类型会决定排列的方式
classNameString这一列的类名
isReadonlyBoolean是否为只读
fieldString绑定的字段
isDealtrueBoolean是否用表格内置的处理
isShowBoolean是否显示当前列
gridtype'base'String值为action时方可编辑
canSearchBoolean值为true时方可搜索
eventString单元格里传出来的事件名

表格配置

属性名可传参数/默认值类型说明
columnsArrary列配置,参考上面
gridtypeaction/baseString表格类型
itemSourceArrary数据源
pageIndex1Number第几页
pageSize30Number每页条数
totalCount0Number数据总条数
itemSourceArrary数据源
showIndexfalseBoolean是否显示行索引
is-fields-searchfalseBoolean是否开启搜索
search-fieldsFunction传出一个对象,key为字段名,value为筛选值

监听事件

属性名可传参数/默认值类型说明
on-custom-compFunction单元格传出事件
select-changeFunction选择勾中或者取消的时候触发的事件
on-page-changedFunction表格当前页码改变时执行的方法,该方法不传参数表示不启用分页
0.3.9

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.0

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.23

5 years ago

0.1.22

5 years ago

0.1.21

5 years ago

0.1.20

5 years ago

0.1.19

5 years ago

0.1.18

5 years ago

0.1.17

5 years ago

0.1.16

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago