<template>
|
<!-- 主列表 -->
|
<el-table :data='tableData' :height='tableHeight' :show-header='showHeader' stripe @expand-change="expandSelect"
|
:expand-row-keys="expands" @cell-click="handleCellClick" :empty-text="$t('common.noData')" class='el_tab_alage'
|
:header-cell-style="cellHeaderStyle" :row-key='getRowKeys' @selection-change="handleSelectionChange">
|
<!-- 单选框 -->
|
<el-table-column align="center" width="50" label=""
|
v-if="tableSelection.key === true && tableSelection.type === 'radio'">
|
<template slot-scope="scope">
|
<el-radio :label="scope.$index" v-model="radio"
|
@change="handleTemplateRow(scope.$index, scope.row)"> </el-radio>
|
</template>
|
</el-table-column>
|
<!-- index索引 -->
|
<el-table-column label="序号" type="index" width="50" align="center"
|
v-if="tableSelection.key === true && tableSelection.type === 'index'"></el-table-column>
|
<!-- 多选框 -->
|
<el-table-column type="selection" width="50" align="center"
|
v-if="tableSelection.key === true && tableSelection.type === 'selection'"></el-table-column>
|
<!-- 列表表头-->
|
<el-table-column type="expand" v-if="tableSelection.key === true && tableSelection.type === 'expand'">
|
<template slot-scope="scope">
|
<el-form label-position="left" inline class="demo-table-expand">
|
<el-form-item :label="index.label" v-for="(index, item) in tableLabel" :key='item'
|
v-show="index.type === 'expand'">
|
<span>{{ scope.row[index.list] }}</span>
|
</el-form-item>
|
</el-form>
|
</template>
|
</el-table-column>
|
<template v-for="(index, item) in tableLabel">
|
<el-table-column fit :align='index.tableAlign ? index.tableAlign : "center"' :key='item' :sortable='index.sort'
|
v-if="index.type !== 'expand'" :label="index.label" :width="index.width"
|
:show-overflow-tooltip="index.overflowShow === 'hidden' ? true : false" :prop="index.list">
|
<template slot-scope="scope">
|
<!-- 图片 -->
|
<template v-if="index.type === 'image'">
|
<el-image v-if="scope.row[index.list] !== ''" style="width: 100px; height: 50px;"
|
:src="scope.row[index.list]">
|
</el-image>
|
<div v-else></div>
|
</template>
|
<!-- 产品图片 -->
|
<template v-if="index.type === 'productImage'">
|
<el-image v-if="scope.row[index.list] !== ''" style="width: 100px; height: 50px;"
|
:src="getProductImageUrl(scope.row[index.list])">
|
</el-image>
|
<div v-else></div>
|
</template>
|
<!-- 头像 -->
|
<template v-else-if="index.type === 'head'">
|
<el-image v-if="!(scope.row[index.list] === '' || scope.row[index.list] === null)"
|
style="width: 50px; height: 50px;" :src="scope.row[index.list]">
|
</el-image>
|
<div v-else></div>
|
</template>
|
<!-- 按钮 -->
|
<template v-else-if="index.type === 'btn'">
|
<el-button type="text" @click.native.prevent="index.method(scope.row, scope)">
|
<u>{{ scope.row[index.list] }}</u>
|
</el-button>
|
</template>
|
<!-- 下拉 -->
|
<template v-else-if="index.type === 'select'">
|
<el-select v-model="scope.row[index.list]" @change="changeType($event, scope.row, item)" size="medium">
|
<el-option v-for="item in index.options" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</template>
|
<!-- 开关按钮 -->
|
<template v-else-if="index.type === 'switch'">
|
<div v-if="index.noSwitch(scope.row)">
|
<el-switch @change="index.method(scope.row, scope)" v-model="scope.row[index.list]"
|
:inactive-value="index.offValue !== null ? index.offValue : 'off'"
|
:active-value="index.onValue ? index.onValue : 'on'" :inactive-text="index.offText ? index.offText : ''"
|
:active-text="index.onText ? index.onText : ''"
|
:inactive-color="index.offColor ? index.offColor : '#ff4949'"
|
:active-color="index.onColor ? index.onColor : '#13ce66'"></el-switch>
|
</div>
|
</template>
|
<!-- 内容自定义 -->
|
<template v-else-if="index.type === 'html'">
|
<div v-html="index.code(scope.row)" class="theHtml"></div>
|
</template>
|
<!-- 正常显示 -->
|
<template v-else>
|
<!-- {{scope.row[index.list]}} -->
|
{{ scope.row[index.list] ? scope.row[index.list] : '-' }}
|
</template>
|
</template>
|
</el-table-column>
|
</template>
|
<!-- 正常按钮操作 -->
|
<el-table-column v-if="tableOption.value !== undefined" fit
|
:align='tableOption.align ? tableOption.align : "center"' :label="tableOption.label"
|
:fixed="tableOption.fixed ? tableOption.fixed : false" :width="tableOption.width">
|
<template style="margin-left: 30px;" slot-scope="scope">
|
<el-button v-for="(value, item) in filteredOptions(scope.row)" :key='item'
|
:disabled="value.disabled ? value.disabled(scope.row) : false" :type="value.type ? value.type : 'text'"
|
:style="value.style ? value.style : {}" :plain='value.plain ? value.plain : false'
|
:round='value.round ? value.round : false' :size='value.size ? value.size : "medium"' :icon="value.icon"
|
@click.native.prevent="value.method(scope.row, scope)">{{ value.label }}
|
</el-button>
|
<el-popover placement="top" trigger="hover"
|
v-if="tableOption.isShowMore ? tableOption.isShowMore(scope.row) : false">
|
<div class="popover-content">
|
<el-button class="popover-button" v-for="(value, item) in filteredPopoverOptions(scope.row)" :key='item'
|
:disabled="value.disabled ? value.disabled(scope.row) : false" :type="value.type ? value.type : 'info'"
|
:style="value.style ? value.style : {}" :size='value.size ? value.size : "mini"'
|
@click.native.prevent="value.method(scope.row, scope)">{{ value.label }}
|
</el-button>
|
</div>
|
<el-button slot="reference" type="text"
|
:style="tableOption.buttonStyle ? tableOption.buttonStyle : {}">{{ tableOption.buttonText }}</el-button>
|
</el-popover>
|
</template>
|
</el-table-column>
|
</el-table>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
radio: '',
|
cellHeaderStyle: {
|
fontSize: "16px",
|
color: "#606266"
|
},
|
expands: [],
|
getRowKeys (row) {
|
return row.id
|
}
|
}
|
},
|
props: {
|
tableData: {
|
type: Array,
|
default: () => { }
|
},
|
tableHeight: {
|
type: Number,
|
default: () => {
|
return null
|
}
|
},
|
showHeader: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
tableSelection: {
|
type: Object,
|
default: () => {
|
return {
|
key: false,
|
type: '',
|
detaile: false
|
}
|
}
|
},
|
tableLabel: {
|
type: Array,
|
default: () => { }
|
},
|
tableOption: {
|
type: Object,
|
default: () => {
|
return {
|
value: undefined
|
}
|
}
|
}
|
},
|
|
methods: {
|
handleSelectionChange (val) {
|
this.$emit('onHandleSelectionChange', val)
|
},
|
handleTemplateRow (index, row) {
|
this.$emit('onHandleTemplateRow', row)
|
},
|
changeType (event, row) {
|
this.$emit('onChangeType', event, row)
|
},
|
expandSelect (row, expandedRows) {
|
const that = this
|
if (expandedRows.length) {
|
that.expands = []
|
if (row) {
|
that.expands.push(row.id)
|
}
|
} else {
|
that.expands = []
|
}
|
},
|
handleCellClick (row, column) {
|
this.$emit('onHandleCellClick', row, column)
|
},
|
getProductImageUrl (id) {
|
return process.env.VUE_APP_BASE_API + 'saas/sysadmin/product/download/id?id=' + id
|
},
|
|
// ✅ 新增：过滤选项的方法
|
filteredOptions(row) {
|
if (!this.tableOption.options) return [];
|
return this.tableOption.options.filter(value => {
|
return value.show ? value.show(row) : true;
|
});
|
},
|
|
// ✅ 新增：过滤弹出框选项的方法
|
filteredPopoverOptions(row) {
|
if (!this.tableOption.popoverOptions) return [];
|
return this.tableOption.popoverOptions.filter(value => {
|
return value.show ? value.show(row) : true;
|
});
|
}
|
}
|
}
|
</script>
|
