Element中el-table和MessageBox组件的二次封装

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

一、封装目的

在使用ElementUI过程中，发现一些组件的代码量还是过多，并且项目中频繁使用，所以就对组件进行了二次封装，并记录在博客中，欢迎共同讨论学习。

二、代码示例

2.1 MessageBox的封装

/**
* 封装 在一个叫commonFn的公共服务里面
* @param {*弹窗提示信息} msgContent
* @param {*弹窗标题} msgTitle
* @param {*弹窗类型:
* 'warning',
* 'success ',
* 'info',
* 'error'
* 四种类型
* } msgType
*/
MessageBox(
msgContent = '此操作将永久删除此条数据, 是否继续?',
msgTitle = '提示信息',
msgType = 'warning') {
var msgBox = MessageBox.confirm(msgContent, msgTitle, {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: msgType
})
return msgBox
}

/**
* 哪里需要在哪里调用即可。
*common是一个公共的函数服务，链式调用即可。
*参数与封装的相对应。
*/
commonFn.MessageBox('ds', '23', 'success').then(()=> {
console.log('确认回调')
}).catch(() => {
console.log('取消回调')
})

2.2 el-table表格的封装

el-table组件封装，这个是同事有封装过得，我在原有的基础上进行了一定的改动，代码量比较多，很多参数ElementUI上都有，详情参加：Element中文教程

<el-table
:key="tableKey"
:data="list"
stripe
fit
highlight-current-row
tooltip-effect="light"
style="width: 100%;"
:cell-style="{'vertical-align':'left','padding':'6px'}"
@selection-change="handleSelectionChange"
@cell-click="handleColumn"
@select="selectBox"
@select-all="selectBoxAll"
>
<el-table-column
v-if="carlist"
type="selection"
width="55"
/>
<el-table-column
v-for="(item,i) in tableColumu"
:key="i"
:label="item.label"
:prop="item.field"
:min-width="item.width"
:formatter="formatterParmas"
>
<template slot-scope="scope">
<span v-if="item.field==='address_type'">{{ scope.row[item.field] | addressTypeFilter }}</span>
<span v-else-if="item.field==='is_default'">
<el-checkbox v-model="scope.row[item.field]" true-label="1" false-label="0" disabled />
</span>
<span v-else-if="item.field==='source'">
{{ scope.row[item.field]|sourceFilter(scope.row[item.field]) }}
</span>
<span v-else-if="item.field==='audit_status'">
<span v-if="scope.row[item.field]=='0'" style="color:#FFAA00">待审核</span>
<span v-if="scope.row[item.field]=='1'" style="color:#F34B4B">审核拒绝</span>
<span v-if="scope.row[item.field]=='2'" style="color:#6BCE41">审核通过</span>
</span>

<span v-else-if="item.field==='org_type'">
<span v-if="scope.row[item.field]=='0'">承运商</span>
<span v-if="scope.row[item.field]=='1'">货主</span>
<span v-if="scope.row[item.field]=='2'">货主/承运商</span>
</span>
<span v-else-if="item.field==='accountant'">{{ scope.row[item.field]==='1' ? '是' : '否' }}</span>
<span v-else>{{ scope.row[item.field] }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" :label="tableOption.label" min-width="200" align="center">
<template slot-scope="scope">
<el-button v-for="(item,i) in tableOption.options" :key="i" type="text" class="link-type" @click="handelBtn(item.methods,scope.row)">{{ item.label }}</el-button>
</template>
</el-table-column>
</el-table>

使用：

这里其实是Vue组件的正常传参，调用。

部分情况说明：

我这里使用了三种方法对后台的数据进行处理，个人感觉是可以优化的，根据情况只使用一种比较好。
欢迎小伙伴在评论区说出自己的想法

如果有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。