vue封装通用表格组件,封装一个table组件

　　对于一个中后台类的项目，一个比较常见的展示形式就是桌子了，这篇文章主要给大家介绍了关于某视频剪辑软件封装通用桌子组件的相关资料，需要的朋友可以参考下

前言

　　随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。

为什么需要封装table组件？

　　后台管理系统表格使用频率高，减少关于桌子的业务代码，且便于后期统一修改、便于后期维护。如给桌子内容展示，超出单元格以省略号展示等。

　　对于大部分的后台管理系统，数据表格的展示大同小异，由于不想写重复的代码，所以我选择封装通用桌子组件，解放双手。如果你的表格有一列并不是简单数字正射影像图元素，比如转换按钮，完全可以传入一个提出函数，来达到目的。

第一步：定义通用组件

　　！-亲表。vue -

　　模板

　　差异

　　埃尔表

　　:data=tableData

　　style=宽度：100%

　　:stripe=tableTitle.stripe

　　:border=tableTitle.border

　　:fit=tableTitle.fit

　　:highlight-current-row=表标题。突出显示当前行

　　@ selection-change= handleSelectionChange

　　！-表格第一列-

　　埃尔-表格-列

　　:type=firstTableCol.type

　　:width=firstTableCol.width

　　v-if=firstTableCol.select

　　/El-表格-列

　　！-表格其它列-

　　el-table-column v-for=(value，index) in tableCol :key=index

　　:prop=value.prop

　　:label=value.label

　　:width=value.width 180

　　模板槽-范围="范围"

　　模板v-if=！ value.render

　　模板v-if=value.formatter

　　/模板

　　模板v-else-if=value.getImgurl

　　El-image:src=值。getimgurl(范围。row，value) style= width:70px；高度：70px

　　:preview-src-list= value。previewsrclist？value.previewSrcList(scope.row，value):value。getimgurl(范围。行，值).拆分(,)/

　　/模板

　　模板v-否则

　　/模板

　　！-扩展多姆

　　模板v-否则

　　表：key= ` cus $ { index } `:render= value。 render :param=范围。行/表

　　/模板

　　/El-表格-列

　　！-基础操作-

　　埃尔-表格-列标签=操作

　　模板槽-范围="范围"

　　El-button type= text v-for=(值，索引)in运算符@click=value.click(scope.row，value) :key=index

　　/el-button

　　/模板

　　/El-表格-列

　　/el-table

　　！-分页插件-

　　埃尔分页

　　v-show=total0

　　:total=total

　　:page-size.sync=pageSize

　　:current-page.sync=currentPage

　　:page-size=[10，20，30，50]

　　布局=总计，大小，上一页，分页，下一页，跳转

　　@ current-change= handleCurrentChange

　　@size-change=handleSizeChange

　　v-bind=$attrs

　　/El-分页

　　/div

　　/模板

　　脚本

　　//渲染函数

　　从导入表。/表格

　　导出默认值{

　　组件：{Table}，

　　道具：{

　　表格标题：{

　　类型：对象，

　　默认值：{

　　条纹：假的，

　　边框：假，

　　适合：真的，

　　highlightCurrentRow: false

　　}

　　第一个表列：{

　　类型：对象，

　　默认值：{

　　选择：假，

　　宽度：55,

　　类型："选择"

　　}

　　表列：{

　　类型：数组，

　　默认值：[]

　　表数据：{

　　类型：数组，

　　默认值：[]

　　操作员：{

　　类型：数组，

　　默认值：[]

　　总计：{

　　类型：数量，

　　默认值：0

　　页面：{

　　类型：数量，

　　默认值：1

　　限制：{

　　类型：数量，

　　默认值：10

　　自动滚动：{

　　类型：布尔型，

　　默认值：真

　　}

　　计算值：{

　　当前页面：{

　　get () {

　　返回此页面

　　设置（值){

　　这个emit(update:page ，val)

　　}

　　页面大小：{

　　get () {

　　退回这个。限制

　　设置（值){

　　这个emit(update:limit ，val)

　　}

　　data () {

　　返回{

　　}

　　方法：{

　　//监听桌子选择框

　　handleSelectionChange(选择){

　　//调用父组件对应的方法handleSelectionChange

　　这个emit(handleSelectionChange ，selection)

　　//监听每页多少条数据（限制)

　　handleSizeChange(限制){

　　这个发出(分页，{page: this.currentPage，limit: limit})

　　if (this.autoScroll) {

　　scrollTo(0，800)

　　}

　　//监听当前是第几页（第页)

　　handleCurrentChange(第页){

　　这个发出(分页，{page: page，limit: this.pageSize})

　　if (this.autoScroll) {

　　scrollTo(0，800)

　　}

　　/脚本

　　样式范围

　　/风格

第二步：父组件与子组件进行render通信

　　为了实现父组件提出函数在子组件中生效，我们需要定义一个提出函数，在子组件中引用。

　　//table.js

　　导出默认值{

　　道具：{

　　渲染：{

　　类型：功能

　　参数：{

　　类型：对象

　　}

　　渲染(h) {

　　返回this.render(h，this.param)

　　}

第三步：使用组件

　　模板

　　差异

　　！-

　　@自定义事件=父组件方法，子组件中，这个$emit(自定义事件名称)触发父组件事件。

　　ref=便携，标记在子组件上，指向子组件实例

　　proTable ref= proTable :tableTitle= tableTitle :tableCol= tableCol :tableData= tableData :operator= operator

　　:firstTableCol=firstTableCol

　　@ handleSelectionChange= handleSelectionChange

　　:total= total :page。sync=查询参数。 page :限制。sync=查询参数。limit @ pagination= getList /

　　/div

　　/模板

　　脚本

　　从导入便携设备。/亲表

　　导出默认值{

　　组件：{

　　便携式

　　data() {

　　返回{

　　查询参数：{

　　第一页，

　　限制：10,

　　类型："成功",

　　总数：50,

　　//元素用户界面中对桌子属性的设置

　　表格标题：{

　　条带:真，

　　 highlightCurrentRow: true

　　//设置桌子的列

　　表列：[

　　{属性：日期，标签:日期},

　　{属性：名称，标签:姓名},

　　{属性：地址，标签:地址，宽度：300},

　　{属性： src ，标签:图片，

　　getImgurl:(行，列，单元格值)={ return this。getImgurl(row)}，

　　previewSrcList: (row，col，cell value)={ return this。listimgurl(row)} }，

　　{道具：性，标签:性别，

　　格式化程序：(行，列，单元格值)={返回此。性别格式化程序(行)} }，

　　{属性： src ，标签:图片，

　　getImgurl:(行，列，单元格值)={ return this。getImgurl(row)} }，

　　{属性：文本，标签:函数，render: (h，params)={return this.render(h，params)}}

　　//表格的基本操作

　　操作员：[

　　{ 文本:详情，click:(行，列，单元格值)={ return this。getinfo(row)} }，

　　{ 文本:删除，click:(行，列，单元格值)={ return this。de info(row)} }，

　　{ 文本:编辑，click:(行，列，单元格值)={ return this。editinfo(row)} }，

　　//模拟数据

　　表格数据：[

　　{

　　日期："2016年5月2日",

　　名称：王小虎，

　　地址：上海市普陀区金沙江路1518 弄，

　　性别：0,

　　img:‘339 gimp 2。百度一下。com/image _ search/src=http://pic 2。智mg。com/50/v2-193 cbb 243 dc14d 3 a 016 CAA 54 ba 02837 _ HD。jpgrefer=http://pic 2。智mg。com app=2002 size=f 9999.10000 q=A8 n=0g=0 nfmt=JPEG？秒=1628435704t=deb 5584 CB 9 ff 53 Fe 6977 f14 a5 e 0755 bb

　　}、gt

　　日期：2016-05-04,

　　名称：王小虎-是啊

　　地址：上海市普陀区金沙江路1517 弄-是啊

　　性：1,

　　img: 339图1。zhmg。com/80/v2-894 ab 624807 FD 4 CFA 33 DD 4和42cc90ac8_720w.jpg？资料来源：1940ef5c

　　}、gt

　　日期：2016-05-01,

　　名称：王小虎-是啊

　　地址：上海市普陀区金沙江路1519 弄-是啊

　　性：0,

　　img:xx.jpg

　　}、gt

　　日期：2016-05-03,

　　名称：王小虎-是啊

　　地址：上海市普陀区金沙江路1516 弄-是啊

　　性：1,

　　img:xx.jpg

　　}],

　　第一个表列：>

　　选择：真，

　　类型：选择

　　}

　　方法：>

　　getinfo(val)}

　　//触发父方法

　　console.log(获取详情S7-1200可编程控制器

　　deliinfo(val)>

　　//触发父方法

　　console.log(删除信息S7-1200可编程控制器

　　编辑信息(val)}

　　//触发父方法

　　console.log(编辑信息S7-1200可编程控制器

　　getimgurl(val)>

　　控制台. log(val.img)

　　返回值图片

　　性格式化程序(val)}

　　返回值性===0?我不知道男 : 女我不知道

　　手柄选择开关(val)>

　　console.log(监听选择框S7-1200可编程控制器

　　获取列表(查询参数)}

　　console.log(父级方法、queryParams)

　　listimgurl()

　　设数组=[]:

　　数组。推( 339图1。zhmg。com/80/v2-894 ab 624807 FD 4 CFA 33 DD 4和42cc90ac8_720w.jpg？资料来源：1940年欧洲法郎；

　　数组。推( 339 cdn。pixabay。com/photo/2021/07/21/20/girl-6380133 _ 960 _ 720。jpg’)；

　　返回数组；

　　渲染(h，params)}

　　返回h(span ，null，我是一个彩现组件)

　　}

　　/脚本

总结

　　在引用组件的页面中，我们可以给每一个表。表列加方法，也可以给编辑~我爱你~删除~我爱你~详情添加自定义的方法，完全实现定制化。也可以自定义彩现函数。效果图如下：

　　到此这篇关于视图(视图)封装通用表。表组件的文章就介绍到这了，更多相关视图(视图)封装通用表。表组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue封装通用表格组件,封装一个table组件

目录

前言

为什么需要封装table组件？

第一步：定义通用组件

第二步：父组件与子组件进行render通信

第三步：使用组件

总结

相关文章阅读