Vue2 根据element-ui 进行表格封装

新科
141 阅读1分钟

self-table.vue .clearBoth::after{ clear: both; }

self-table.mixin

export default { computed: { entityFields() { return this.fields } }, data() { return { tableRef: 'table', queryRef: 'queryForm', layName: '', queryName: '', tableName: '', pageName: '', fields: [], tableData: [], tableAttrs: { highlightCurrentRow: true, size: 'mini', border: true, stripe: true }, allowSelect: false, newRows: 0, tableSelection: [], tableEvents: { 'selection-change': this.tableSelectionChange }, queryForm: { colSpan: 6, size: 'mini', 'label-width': '80px' }, rules: {}, queryEntity: {}, page: { show: true, hideOnSinglePage: true, background: true, layout: 'total,sizes, prev, pager, next', pageSize: 5, pageSizes: [5, 10, 20, 30], pageNum: 1, total: 0 } } },

methods: { editMethod(row) { }, deleteMethod(row) { }, queryMethod() { this.page.pageNum = 1 this.getList() }, tableSelectionChange(selection) { this.tableSelection = selection }, resetFields() { this.page = { ...this.page, ...{ pageSize: 10, pageNum: 1 }} this.tableData = [] /* @@ this.table self-table 组件的 ref 值 定义在父组件中 */ this.refs[this.table].refs[this.table].refs[this.queryRef].resetFields() this.queryMethod() }, getList() {}, handleSizeChange(val) { this.page.pageSize = val this.queryMethod() }, handleCurrentChange(val) { this.page.pageNum = val this.getList() } } }

辅助文档

……所有数据在父组件初始化即可 …… 单个页面中只有一个表格时使用

  • Mixin [selfTable.js] 中做了数据初始化,含有默认值

  • 使用准则

  • layName,queryName,tableName,pageName 是布局中的class名称, 可以自定义 form,table，以及整个页面的布局样式，非scope css样式可以影响

  • layStyle,queryStyle,tableStyle,pageStyle 是布局中的style

  • 数据介绍

  • layName 整体布局 (必填) 定义样式

  • 表单介绍

    1. queryName决定了是否需要查询表单以及定义queryForm样式 <i (使用表单必填)
    2. queryRef 是el-form的 ref值 默认值："queryForm"
    3. queryForm 是el-form的属性集合。queryForm.colSpan是默认行中查询按钮所在宽度
    4. queryEntity 是el-form model绑定值 <i (使用表单必填)
    5. rules 是el-form 校验规则
    6. newRows 查询表单是否为多行 默认值:0 查询表单为一行
      • newRows相关slot介绍 slot name值为：query-form-item-${idx} 1<= idx <=newRows

  • 表格介绍

    1. tableUnshown 是否使用表格,<i 默认值undefined,如果值为true则表格不被使用
    2. tableName 定义表格样式 <i (使用表格必填)
    3. tableRef 是 el-table的ref值 默认值:"table"
    4. loading v-loading值 默认false 表格的待加载
    5. tableAtrrs 是el-table的属性集合
    6. tableData el-table的data属性的值表格绑定值 <i (使用表格必填)
    7. tableEvents 表格相关事件,具体查询element-ui table Events
    8. allowSelect 是否允许多选（只出现在第一列）
    9. tableSelection 是选中的数据集合
    10. unshow_operate 是否显示表格最后一列操作列，默认undefined，如果为true则不显示
    11. entityFields 父组件中对应的属性是fields
      • fields 属性介绍 是决定 table_column属性的集合 每一个子项名 field
        1. field.label column的label名称 <i (使用必传)
        2. field.prop column的prop 属性名 <i (使用必传)
        3. field.fixed 列 是否fixed
        4. field.width 列的宽度
        5. field.minWidth 列最小宽度
        6. field.align 列中内容位置 field.align不填默认偏左
        7. field.solve 是否要对列中的数据进行处理，配合父组件中的filter使用 filter命名与solve值相同,输入值是本行数据 <i formatter 存在时无效
        8. field.unshown 是否展示该列
        9. field.formatter 列中显示格式 具体查询element-ui Table-column Attributes
        10. filed.componentName 对列中内容自定义时使用 <i solve存在时无效
          • 对应的slot name=filed.componentName
    12. operateLabel 对应自定义操作例的label
    13. operateAttrs 对应自定义操作列的属性
    14. selfOperate 是否展示自定义操作
    • 分页介绍
      1. pageName 分页布局样式，可选
      2. page el-pagination 的属性值集合 默认值可在[slefTable.js]查看
      3. page.show 是否展示分页 默认true

  • 方法介绍 [方法在slefTable.js中]

    1. editMethod(row) { }, 默认的编辑方法
    2. deleteMethod(row) { }, 默认的删除方法
    3. queryMethod() { }, 默认的查询方法 queryForm查询的方法 调用 getList的方法从第一页查询按条件查询
    4. tableSelectionChange(selection) { this.tableSelection = selection }, 存储选择数据的方法 对应 tableEvents
    5. resetFields() { this.page = { ...this.page, ...{ pageSize: 10, pageNum: 1 }} this.tableData = [] this.refs[this.table].refs[this.table].refs[this.queryRef].resetFields() }, 重置form表单的方法
    6. getList() {}, 获取表格数据的方法
    7. handleSizeChange(val) { this.page = { ...this.page, pageSize: val } this.queryMethod() }, 每页显示数量改变时的回调
    8. handleCurrentChange(val) { this.page.pageNum = val this.getList() }, 当前页改变时的回调

  • 插槽介绍 (下面描述的都是 slot的name属性)

    1. $slots['query-form'] 如果存在则使用插槽自定义query-from，组件中默认定义无效
    2. slots[′query−form−item−slots['query-form-item-{idx}'] 如果newRows>0 时定义新行的值
    3. slots[′query−form−item−end′]slots['query-form-item-end'] slots['query-form-item-end']定义默认行的查询条件，如果存在则查询按钮和重置按钮显示
    4. $slots['table-lay-header'] 自定义表格之前的内容与表格在同一布局上
    5. $slots['table'] 如果存在则使用自定义表格，组件中表格无效
    6. :name="field.componentName" 如果存在则自定义表格列中内容 <i 与 solve不能共存
    7. $slots['operate-column'] 如果存在则自定义操作列中内容
    8. $slots['middle'] 在table与form 布局中间插入组件
avatar
文章
阅读
粉丝