el-table
尽接入部分组件， 可根据需求添加
-
支持参数
- 显示序号
- 选择 (单选/多选)
-
自定义操作按钮
- 按钮
- 气泡确认框
- 表格内编辑
- 开关
-
自定义格式化
- 自动匹配
- 图片
- 状态
- 文字提示
- 编辑
template部分
<div class="base-table clearfix" ref="tableHeiRefs">
<el-table
ref="baseTableRefs"
v-show="tableColumns.length > 0 || showTable"
tooltip-effect="dark"
style="width: 100%"
:data="list"
:border="border"
:stripe="stripe"
@sort-change="sortChange"
@selection-change="handleSelectionChange"
:[heiKey]="tableHei == 'auto' ? '100%' : tableHei"
:row-key="rowKey"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@row-click="rowClick"
:show-summary="sumRowState"
:summary-method="getSummaries"
v-loading="isLoading"
:cell-class-name="tableCellClassName"
:row-class-name="tableRowClassName"
:span-method="objectSpanMethod"
>
<template v-if="selection">
<el-table-column type="selection" width="70px" align="center" :reserve-selection="true" />
template>
<template v-if="radioSelect">
<el-table-column label="" width="40">
<template slot-scope="scope">
<el-radio class="radio" v-model="checkModel" :label="scope.$index">el-radio>
template>
el-table-column>
template>
<template v-if="number">
<el-table-column type="index" :index="indexMethod" label="序号" :width="numberW" align="center" :fixed="numberFixed" />
template>
<el-table-column
v-for="(item, key) in tableColumns"
:key="key"
:label="item.label"
:prop="item.prop"
:width="item.width ? item.width + '' : ''"
min-width="120"
:align="item.align"
:fixed="item.fixed"
:sortable="item.sortable"
>
<template slot-scope="scope">
<template v-if="typeof item.modify === 'function'">
<span>
<template v-for="(v, index) in item.modify(scope.row, key)">
<template v-if="v.typeof === 'button'">
<el-button
v-if="
v.show
? showState(
v.showState,
scope.row[v.show],
v.otherShowState,
scope.row[v.otherShow],
v.state,
v.stateShow,
v.keyIdx,
v.showOther ? scope.row[v.showOther] : false,
v.isVal,
v.isNull
)
: true
"
size="mini"
:key="index"
:class="[v.typecolor ? 'btn-text-' + v.typecolor : 'btn-text-primary']"
:type="v.type ? v.type : 'primary'"
:disabled="scope.row | disabledState(v.disabled, v.disabledValue)"
:title="v.iconName"
@click.native.stop="
() => {
v.method(scope.$index, scope.row);
}
"
>
<i v-if="v.icon" :class="`iconfont ${v.iconclass}`">i>{
{ v.name }}
el-button>
template>
// 气泡确认框
<template v-else-if="v.typeof === 'popconfirm'">
<el-popconfirm
:key="index"
:popper-class="v.popperClass"
:hide-icon="true"
:title="v.title"
:confirm-button-text="v.confirmText"
:confirm-button-type="v.confirmType"
@confirm="
() => {
v.confirmFun(scope.row);
}
"
:cancel-button-text="v.cancelText"
:cancel-button-type="v.cancelType"
@cancel="
() => {
v.cancelFun(scope.row);
}
"
v-show="showState(scope.row, v.show, v.showValue)"
>
<span slot="reference">
<span class="addCPStyle">
<i :class="`iconfont ${v.iconclass}`" v-if="v.icon">i>
{
{ v.name }}
span>
span>
el-popconfirm>
template>
<template v-else-if="v.typeof === 'edit'">
<span :key="'editname' + index">
{
{ scope.row[item.prop] }}
<i
:class="`iconfont ${v.headerIcon} edit-icon`"
@click.native.stop="
() => {
v.method(item.prop, scope.row);
}
"
>i>
span>
template>
//
<template v-else-if="v.typeof === 'editLink'">
<span :key="'editname' + index">
<el-button
:class="{ 'm-l-xs': index != 0 }"
type="text"
size="mini"
@click.native.stop="
() => {
v.method1(scope.$index, scope.row);
}
"
>{
{ scope.row[item.prop] }}el-button
>
<i
:class="`iconfont ${v.headerIcon} edit-icon`"
@click.native.stop="
() => {
v.method2(item.prop, scope.row);
}
"
>i>
span>
template>
// 链接
<template v-else-if="v.typeof === 'link'">
<span :key="'link' + index">
<el-button
:class="{ 'm-l-xs': index != 0 }"
type="text"
size="mini"
@click.native.stop="
() => {
v.method(scope.$index, scope.row);
}
"
>{
{ scope.row[item.prop] }}el-button
>
span>
template>
// 开关
<template v-else-if="v.typeof === 'editSwitch'">
<span :key="'switch' + index">
<el-switch
v-model="scope.row[item.prop]"
:active-value="v.activeVal"
:inactive-value="v.inactiveVal"
@change="
() => {
v.method(scope.$index, scope.row);
}
"
>
el-switch>
span>
template>
template>
span