163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
Vue
<template>
|
|
<el-table-column
|
|
v-if="methodList.length > 0"
|
|
slot="handleBtn"
|
|
prop="operation"
|
|
v-bind="$attrs"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-for="(item, index) in methodList" :key="'btn' + index">
|
|
<span
|
|
v-show="index === 0 ? false : true"
|
|
style="margin: 0 4px; font-size: 18px; color: #e5e7eb"
|
|
>|</span
|
|
>
|
|
<el-button
|
|
:disabled="
|
|
item.showParam ? !showFilter(item.showParam, scope.row) : false
|
|
"
|
|
type="text"
|
|
style="margin: 5px 0; padding: 0"
|
|
@click="
|
|
clickButton({
|
|
data: scope.row,
|
|
type: item.type
|
|
})
|
|
"
|
|
>
|
|
<span
|
|
v-if="
|
|
item.type === 'delete' ||
|
|
item.type === 'edit' ||
|
|
item.type === 'detail'
|
|
"
|
|
class="iconfont"
|
|
:class="
|
|
item.type === 'delete'
|
|
? 'icon-delete' +
|
|
(item.showParam
|
|
? !showFilter(item.showParam, scope.row)
|
|
? ''
|
|
: ' delete-color'
|
|
: ' delete-color')
|
|
: item.type === 'edit'
|
|
? 'icon-edit' +
|
|
(item.showParam
|
|
? !showFilter(item.showParam, scope.row)
|
|
? ''
|
|
: ' primary-color'
|
|
: ' primary-color')
|
|
: item.type === 'detail'
|
|
? 'icon-detail' +
|
|
(item.showParam
|
|
? !showFilter(item.showParam, scope.row)
|
|
? ''
|
|
: ' primary-color'
|
|
: ' primary-color')
|
|
: ''
|
|
"
|
|
></span>
|
|
<span v-else>{{ item.btnName }}</span>
|
|
</el-button>
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* 传入的组件prop格式
|
|
* methodList<MethodItem> = []
|
|
* Interface MethodItem = {
|
|
* btnName: string,
|
|
* type: string
|
|
* }
|
|
*
|
|
*/
|
|
export default {
|
|
name: 'MethodBtn',
|
|
props: {
|
|
methodList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
clickButton(raw) {
|
|
this.$emit('clickBtn', {
|
|
data: raw.data,
|
|
type: raw.type
|
|
})
|
|
},
|
|
showFilter(showParam, row) {
|
|
let showStatus = true
|
|
const showStatusArr = showParam.data.map((item) => {
|
|
let showStatusItem = true
|
|
if (item.type === 'unequal') {
|
|
if (row[item.name] !== item.value) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
if (item.type === 'equal') {
|
|
if (row[item.name] === item.value) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
if (item.type === 'more') {
|
|
if (row[item.name] >= item.value) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
if (item.type === 'less') {
|
|
if (row[item.name] <= item.value) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
if (item.type === 'indexof') {
|
|
if (item.value.indexOf(row[item.name]) >= 0) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
if (item.type === 'unindexof') {
|
|
if (item.value.indexOf(row[item.name]) < 0) {
|
|
showStatusItem = true
|
|
} else {
|
|
showStatusItem = false
|
|
}
|
|
}
|
|
return showStatusItem
|
|
})
|
|
if (showStatusArr.indexOf(false) >= 0 && showParam.type === '&') {
|
|
showStatus = false
|
|
}
|
|
if (showStatusArr.indexOf(true) < 0 && showParam.type === '|') {
|
|
showStatus = false
|
|
}
|
|
return showStatus
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import './../../../assets/iconfont/iconfont.css';
|
|
.delete-color {
|
|
color: #ff5454;
|
|
}
|
|
.primary-color {
|
|
color: #0b58ff;
|
|
}
|
|
</style>
|