吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1421|回复: 3
收起左侧

[其他原创] element-ui 表头组件封装

  [复制链接]
hang1231 发表于 2022-11-22 13:51

element-ui 表头组件封装

listArr : 表单内容

数据格式 : listArr  [

    {

key必须为tableTitleList 的prop 可以互换  : value 正常值

   }

]

tableTitleList :表单表头

数据格式 :     tableTitleList: [

​    {

​     prop: 'systemID',

​     name: '育信ID'

​    },

​    {

​     prop: 'userName',

​     name: '真实姓名'

​    },

​    {

​     prop: 'idNumber',

​     name: '证件号码'

​    }

   ],

condition 为按钮是否显示 初始化为  false
显示按钮 需传入按钮数组

   btnTitle: [

​    {

​     title: '查看',

​     name: 'look',

​     type: 'text'

​    },

​    {

​     title: '编辑',

​     name: 'edit',

​     type: 'text'

​    },

​    {

​     title: '删除',

​     name: 'delete',

​     type: 'text'

​    }

   ],

title : 显示名称  name是调用子组件的返回事件@name='fn' 即可触发事件 返回值为 下标与 对应当前行的对象数据  type :为element-ui组件的按钮对应type
使用方式
如   <组件 @look='fn'></组件>


  fn (*index*, *item*) {

  // 表格行间下标 与 对应的元素对象

   console.log(*index*, *item*)

  },

conditionss 是否显示全选 默认 false
将文件放入components文件夹   在main .js 使用  

import InformationQuery from 'c/informationQuery' 

这里的c 是我在vue.config.js中重新更换的对应 components 文件夹名称 如未修改 可改为 '@/components/informationQuery'
正式调用使用  information-query 进行页面内调用

组件样式图

组件样式图

informationQuery.zip

41.48 KB, 下载次数: 4, 下载积分: 吾爱币 -1 CB

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Wddxg 发表于 2022-11-25 01:17
实用,支持
ywmadonis 发表于 2022-11-30 21:39
yang16 发表于 2022-12-5 09:14
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-25 02:46

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表