基于ElementUI封装可复用的表格组件
// 复选框
// 序号
<template v-if="item.type === 'Button'">
<el-button v-for="btnItem in item.btnList" :key="btnItem.label"
:disabled="btnItem.disabled && btnItem.disabled(scope.row)"
:type="btnItem.type"
:size="size || btnItem.size"
:icon="btnItem.icon"
@click="btnItem.handle(that,scope.row)">{{btnItem.label}}
</el-button>
</template>
<!-- html -->
<span v-if="item.type==='html'" v-html="item.html(scope.row)"></span>
<!-- 下拉框 -->
<el-select v-if="item.type==='select'" v-model="scope.row\[item.prop\]" :size="size || btn.size" :props="item.props"
:disabled="item.isDisabled && item.isDisabled(scope.row)"
@change='item.change && item.change(that,scope.row)'>
<el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
</el-select>
<!-- 单选 -->
<el-radio-group v-if="item.type==='radio'" v-model="scope.row\[item.prop\]"
:disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
@change='item.change && item.change(that,scope.row)'>
<el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
</el-radio-group>
<!-- 复选框 -->
<el-checkbox-group v-if="item.type==='checkbox'" v-model="scope.row\[item.prop\]"
:disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
@change='item.change && item.change(that,scope.row)'>
<el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key='ra.value'>{{ra.label}}</el-checkbox>
</el-checkbox-group>
<!-- 评价 -->
<el-rate v-if="item.type==='rate'" v-model="scope.row\[item.prop\]"
:disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
@change='item.change && item.change(scope.row)'></el-rate>
<!-- 开关 -->
<el-switch v-if="item.type==='switch'" v-model="scope.row\[item.prop\]" :size="size || btn.size"
:active-value='item.values&&item.values\[0\]'
:inactive-value='item.values&&item.values\[1\]'
:disabled="item.isDisabled && item.isDisabled(scope.row)"
@change='item.change && item.change(scope.row)'></el-switch>
<!-- 图像 -->
<img v-if="item.type==='image'" :src="scope.row\[item.prop\]" @click="item.handle && item.handle(scope.row)"/>
<!-- 滑块 -->
<el-slider v-if="item.type==='slider'" v-model="scope.row\[item.prop\]"
:disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
@change='item.change && item.change(scope.row)'></el-slider>
<!-- 默认 -->
<span v-if="!item.type"
:style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size"
:class="item.itemClass && item.item.itemClass(scope.row)">{{(item.formatter && item.formatter(scope.row)) || scope.row\[item.prop\]}}</span>
</template>
</el-table-column>
</el-table>
</section>
<!-- 分页 -->
<section class="ces-pagination" v-if='isPagination'>
<el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;margin-top: 20px;'
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
background
layout="total,sizes ,prev, pager, next, jumper"
:page-size="tablePage.pageSize"
:current-page="tablePage.pageNum"
:total="tablePage.total"
></el-pagination>
</section>
</section> 以上是封装好的表格组件 table.vue
使用该组件
最后效果
手机扫一扫
移动阅读更方便
你可能感兴趣的文章