index.vue表格组件源码
<template>
<div style="height: 100%;">
<!-- 自定义头部标签操作按钮 -->
<div style="padding: 3px 0;" v-if="headButton">
<slot name="second"></slot>
</div>
<el-table v-loading="loading" :data="tableData" :row-key="rowKey" border @sort-change='sortChange' @select="select"
:highlight-current-row="true" @select-all="select"
@selection-change="handleSelectionChange"
:header-cell-style="{'text-align':headerAlign,'background':'#eef1f6'}" @current-change="handleCurrentChange"
:height="calcHeight"
v-bind="$attrs"
v-on="$listeners">
<!-- v-bind="$attrs" 可以从外部直接使用el-table组件的属性值 -->
<!-- v-on="$listeners" 可以从外部直接调用el-table组件的方法 -->
<el-table-column type="selection" v-if="choice" width="50" :align="headerAlign" :key="Math.random()">
</el-table-column>
<!-- 序号 -->
<el-table-column label="序号" v-if="serialNumber" fixed="left" width="50" type="index" :align="headerAlign"
:key="Math.random()">
</el-table-column>
<!-- 动态表头 -->
<template v-for="(item, index) in tableLabel">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align?item.align:'left'"
:formatter="item.render"
:show-overflow-tooltip="item.tooltip || false"
:fixed="item.fixed"
:index="index"
:width="item.width"
:sortable="item.sort"
>
<!-- 动态具名插槽 -->
<div v-if="item.slot" slot-scope="scope">
<slot :name="item.prop" :row="scope.row"></slot>
</div>
<!-- 处理render函数 -->
<div v-else-if="item.render" slot-scope="scope">
{{item.render(scope.row)}}
</div>
<div v-else slot-scope="scope">
{{scope.row[item.prop]}}
</div>
</el-table-column>
</template>
</el-table>
</div>
</template>
<!-- /**
* 组件说明
* 属性:
* 参数 说明 类型 默认值
* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* tableData 列表 的数据源 Array []
* treeProps 支持树类型的数据的列表显示 Object {children: 'children'}
* rowKey 树类型的数据 列表必须要指定 String '_id'
* serialNumber 是否需要序号 Boolean true
* headerAlign 表头对齐方式/复选框/序号 String 'left'/'center'/'right'
* tableLabel 动态表头渲染数组 Array []
* choice 是否开启多选复选框 Boolean false
* operation 操作列表按钮 Object {}
* total 分页总页数 number 0
* 回调事件:
* select 获取复选框选中对象 返回数组
* sortChange 获取当前点击表头指定排序结果
* handleCurrentPage 每次切换页数触发并且回调页数
* handleNumberChange 每次切换展示的条数触发并且回调
*/ -->
<script>
export default {
components: {
},
props: {
headButton: {
type: Boolean,
default: false
},
tableData: {
type: Array,
default: () => ([])
},
treeProps: {
type: Object,
default: () => ({
children: 'children'
})
},
rowKey: {
type: String,
default: 'id'
},
calcHeight:{
type: String,
default: 'calc(100vh - 200px)'
},
serialNumber: {
type: Boolean,
default: false
},
headerAlign: {
type: String,
default: 'left'
},
tableLabel: {
type: Array,
default: () => ([])
},
loading:{
type: Boolean,
default: true
},
choice: {
type: Boolean,
default: false
},
operation: {
type: Object,
default: () => ({})
},
total: {
type: Number,
default: 0
},
},
data() {
return {
}
},
watch: {
},
created() {
},
methods: {
// 复选框勾选
select(row) {
this.$emit('select', row)
},
// 排序
sortChange(column, prop, order) {
this.$emit('sortChange', column)
},
// 点击列表 获取数据
handleCurrentChange(row) {
this.$emit('handleCurrentChange', row)
},
handleSelectionChange(row){
this.$emit('handleSelectionChange', row)
}
}
}
</script>
<style scoped lang="scss">
/* 默认el-table 行高过于高，这里设置减少padding之间的间距 */
::v-deep th {
padding: 2px 0;
}
::v-deep .el-table td {
padding: 5px 0;
}
</style>
使用示例
父组件里面
自定义列可以使用插槽 列数据格式展示可以使用render函数
<table-list :loading="loading" :tableData="myProcessList" :tableLabel="tableLabel" :choice="true" pagingPosition="center" :paging="true"
:operation="operation" :calcHeight="calcHeight" :fixedHeight="500" :total="total" headerAlign='center'
:headButton="true" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">
<!-- <template v-slot:second>-->
<!-- <el-button type="primary" size="mini" ><i class="el-icon-download"></i> 导出</el-button>-->
<!-- </template>-->
<template slot-scope="scope" slot="ticketCode">
<div @click="handleFlowRecord(scope.row)" style="color:#1890ff;cursor:pointer;">{{scope.row.finishTime==null ?scope.row.procVars && scope.row.procVars.ticketCode || ('LC'+'_'+scope.row.procVars.procDefId && scope.row.procVars.procDefId.split(":")[0]+'_'+scope.row.taskId) :scope.row.startUserId || ''}}</div>
</template>
<template slot-scope="scope" slot="category">
<dict-tag :options="dict.type.sys_process_category" :value="scope.row.category" />
</template>
<template slot-scope="scope" slot="version">
<el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
</template>
<template slot-scope="scope" slot="ticketAbstract">
<div v-if="scope.row.procVars.ticketAbstract!=='' && scope.row.procVars.ticketAbstract!==null && typeof(scope.row.procVars.ticketAbstract) !== 'undefined'" @click="handleFlowRecord(scope.row)" style="color: #1890ff; cursor: pointer">
<div v-if="scope.row.procDefName.indexOf('操作票')>-1"><el-tag type="success" size="mini">操作任务:</el-tag> {{ scope.row.procVars.ticketAbstract || '' }}</div>
<div v-else-if="scope.row.procDefName.indexOf('缺陷')>-1 && !scope.row.procVars.ticketAbstract === false"><el-tag type="danger" size="mini">缺陷详情:</el-tag> <el-tag type="info" size="mini" v-if="!scope.row.procVars.departmentShould === false">{{scope.row.procVars.departmentShould}}</el-tag> {{ scope.row.procVars.ticketAbstract || '' }}</div>
<div v-else-if="scope.row.procDefName.indexOf('工作票')>-1"><el-tag type="waring" size="mini">工作内容:</el-tag> {{ scope.row.procVars.ticketAbstract || '' }}</div>
</div>
<div v-else> 暂无内容 </div>
</template>
<template slot-scope="scope" slot="flowStatus">
<el-tag v-if="scope.row.finishTime == null" size="mini">进行中</el-tag>
<el-tag type="success" v-else size="mini">已完成</el-tag>
</template>
<template slot-scope="scope" slot="workName">
<label v-if="scope.row.assigneeName"
>{{ scope.row.assigneeName }}
<el-tag type="info" size="mini" v-if="!scope.row.assigneeDeptName === false">{{ scope.row.assigneeDeptName }}</el-tag></label
>
</template>
<template slot-scope="scope" slot="handleButton">
<el-button @click="handleFlowRecord(scope.row)" icon="el-icon-view" type="text" size="small">详情</el-button>
<el-button
@click="handleDelete(scope.row)"
type="text"
size="small"
icon="el-icon-delete"
v-hasPermi="['system:deployment:remove']"
>删除</el-button
>
</template>
</table-list>
表格数据：
tableLabel:[
{
prop: 'ticketCode',
label: '流程编号',
align:'left',
sort:true,
fixed:true,
slot:'ticketCode',
width:180
},
{
prop: 'procDefName',
label: '流程名称',
align: 'left',
tooltip:true,
width:260
},
{
prop: 'category',
label: '流程分类',
align: 'center',
sort:true,
width:150,
slot:'category'
},
{
prop: 'ticketAbstract',
label: '内容摘要',
align: 'left',
slot: "ticketAbstract",
width:260,
tooltip:true
},
{
prop: 'version',
label: '流程版本',
align: 'center',
slot:'version',
width:90
},
{
prop: 'createTime',
label: '提交时间',
align: 'center',
width:180
},
{
prop: 'flowStatus',
label: '流程状态',
align: 'center',
slot: "flowStatus",
width:100,
},
{
prop: 'duration',
label: '耗时',
align: 'center',
width:150
},
{
prop: 'taskName',
label: '当前进度',
align: 'center',
width:100,
tooltip:true
},
{
prop: 'workName',
label: '办理人',
align: 'left',
width:150,
tooltip:true,
slot:'workName',
},
{
prop: 'handleButton',
label: '操作',
align: 'center',
width:150,
fixed:'right',
slot:'handleButton',
}
],