@sd-common/table v0.0.39

Install

$ npm i --save @sd-common/table

Demos

See demos of Local Data and Remote Data on CodePen.

Quick Start

Import modules and set up settings in main.js:

import Vue from 'vue'
import ElSearchTablePagination from '@sd-common/table'

// Default use axios as HTTP tool
Vue.use(ElSearchTablePagination)
// or set a custom HTTP tool
import axios from 'axios'
Vue.use(ElSearchTablePagination, {
    axios
})

Use this package to show remote data in a page:

<template>
  <el-search-table-pagination
    url="example.xxx.com/list"
    :columns="columns"
    :formOptions="formOptions">
  </el-search-table-pagination>
</template>

<script>
  export default {
    data() {
      return {
        formOptions: {
          inline: true,
          submitBtnText: 'Search',
          forms: [
            { prop: 'name', label: 'Name' },
            { prop: 'mobile', label: 'Mobile' },
            { prop: 'sex', label: 'Sex', itemType: 'select',
              options: [
                { value: '', label: 'All' },
                { value: 0, label: 'Male' },
                { value: 1, label: 'Female' }
              ]
            }
          ]
        },
        columns: [
          { prop: 'name', label: 'Name', width: 140 },
          { prop: 'mobile', label: 'Mobile', minWidth: 180 },
          { prop: 'sex', label: 'Sex', width: 80,
            render: row => {
              const { sex } = row
              return sex === 0 ? 'Male' : sex === 1 ? 'Female' : 'Unknow'
            }
          }
        ]
      }
    }
  }
</script>

And the Test page is the image above.

Use this package to show local data in a page:

<template>
  <el-search-table-pagination
    type="local"
    :data="tableData"
    :page-sizes="[5, 10]"
    :columns="columns"
    :form-options="formOptions">
  </el-search-table-pagination>
</template>

<script>
  export default {
    data() {
      return {
        formOptions: {
          inline: true,
          submitBtnText: 'Search',
          forms: [
            { prop: 'name', label: 'Name' },
            { prop: 'mobile', label: 'Mobile' },
            { prop: 'sex', label: 'Sex', itemType: 'select',
              options: [
                { value: '', label: 'All' },
                { value: 0, label: 'Male' },
                { value: 1, label: 'Female' }
              ]
            }
          ]
        },
        columns: [
          { prop: 'name', label: 'Name', width: 140 },
          { prop: 'mobile', label: 'Mobile', minWidth: 180, editor: true, 
            editItemType:'select',
            exportSelectProp:'exportMobile'
            selectFetch: this.function(),
            valueKey:'valueKey',
            labelKey:'labelKey'
          },
          { prop: 'sex', label: 'Sex', width: 100,
            render: row => {
              const { sex } = row
              return sex === 0 ? 'Male' : sex === 1 ? 'Female' : 'Unknow'
            }
          }
        ],
        tableData: [
          { name: 'Sam', mobile: '15299xxxx', sex: 0 },
          { name: 'Jean', mobile: '13452xxxx', sex: 1 },
          { name: 'Tony', mobile: '187233xxxx', sex: 0 }
        ]
      }
    }
  }
</script>

API 文档

属性

    data.forEach(item => {
    item.type = 'Parent';
    item.children && item.children.forEach(child => ({...child,type:'Child' }))
}) | '' |

注：更多属性，请参考 Element UI Table 组件的文档。

支持的Element UI Table属性有：stripe / border / height / max-height / fit / show-header / highlight-current-row / current-row-key / row-class-name / row-style / row-key / empty-text / default-expand-all / expand-row-keys / default-sort / tooltip-effect / show-summary / sum-text / summary-method / size。

Table column 属性

注：更多属性，请参考 Element UI Table column 的文档。

支持的Element UI Table column属性有：column-key / fixed / render-header / sortable / sort-by / sort-method / resizable / formatter / show-overflow-tooltip / align / header-align / class-name / label-class-name / selectable / reserve-selection / filters / filter-placement / filter-multiple / filter-method / filtered-value 。

注：关于formatter属性，如果定义了renderer或者filter的时候，formatter不起作用。

Form Option 属性

Form Item 属性

Form Item 常用搜索下拉框混入使用

| mixinsSignManagerSecelt | 签约经理 | mixinsCustomerSelect | 客户 | mixinsAccountSelect | 账户人员 | mixinsDepartmentSelect | 部门

模版：

函数

Form Item itemType 属性

• 新增:datetimerange,时间日期范围选择器,支持精确到时分秒
• 新增:cascader,联动选择器,用法与select一样,关键在于这个类型的options支持children

Slots

Events

默认值回填说明

一般回填 searchSetDataOnly(type, val) 中type为forms中prop值

日期范围选择daterange回填， type为 daterange-prefix + i; i为daterange在forms中的索引值

<template>
  <el-search-table-pagination
    ref="table"
    :form-options="formOptions">
  </el-search-table-pagination>
</template>

<script>
  export default {
    data() {
      return {
        formOptions: {
          forms: [
            { prop: 'name', label: '姓名' },
            {
              prop: ['startTime', 'endTime'],
              label: '时间范围',
              itemType: 'daterange',
              placeholder: '时间范围',
            }
          ]
        }
      }
    },
    mounted () {
      // 一般回填
      this.$refs.table.searchSetDataOnly('name', "张三");
      // 类型为daterange回填， 第一个参数为 daterange-prefix + forms的索引值， 如下：
      this.$refs.table.searchSetDataOnly('daterange-prefix1', this.dateTime);
    }
  }
</script>