[update] 封装表格操作列，有特殊判断
This commit is contained in:
lideqin
@@ -23,6 +23,69 @@
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<!-- 操作栏 -->
|
||||
<template slot="action" slot-scope="text, record, index">
|
||||
<slot name="action" v-bind="{text, record, index}">
|
||||
<div class="action-span-cell">
|
||||
<!-- 传了operSpecialJudgeField，需要特殊判断操作列是否显示更多 -->
|
||||
<template v-if="operSpecialJudgeField">
|
||||
<template v-if="operSpecialJudge(record).length > operateMaxNum + 1">
|
||||
<!-- 需要更多按钮 -->
|
||||
<a @click="operationClick(operSpecialJudge(record)[0],record)">{{ operSpecialJudge(record)[0].text }}</a>
|
||||
<template v-if="operSpecialJudge(record).length > operateMaxNum">
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown placement="bottomCenter">
|
||||
<a-icon type="more" class="operate-icon-btn operate-icon-more" />
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-for="(operation, index) in operSpecialJudge(record).slice(operateMaxNum)" :key="index">
|
||||
<a @click="operationClick(operation,record)">
|
||||
<div class="operate-btn">
|
||||
{{ operation.text }}
|
||||
</div>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 不需要更多按钮 -->
|
||||
<template v-for="(operation, index) in operSpecialJudge(record)">
|
||||
<a :key="index" @click="operationClick(operation,record)">{{ operation.text }}</a>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- 没有特殊判断，直接渲染operationList -->
|
||||
<!-- 需要更多按钮的情况 -->
|
||||
<template v-if="operationList.length > operateMaxNum + 1">
|
||||
<a @click="operationClick(operationList[0],record)">{{ operationList[0].text }}</a>
|
||||
<template v-if="operationList.length > operateMaxNum">
|
||||
<a-divider type="vertical" />
|
||||
<a-dropdown placement="bottomCenter">
|
||||
<a-icon type="more" class="operate-icon-btn operate-icon-more" />
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
|
||||
<a @click="operationClick(operation,record)">
|
||||
<div class="operate-btn">
|
||||
{{ operation.text }}
|
||||
</div>
|
||||
</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="operationList.length > 0">
|
||||
<template v-for="(operation, index) in operationList">
|
||||
<a :key="index" @click="operationClick(operation,record)">{{ operation.text }}</a>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<div slot="settingDropdown">
|
||||
<a-card v-if="needSettingColumnHideOrFreeze">
|
||||
<a-table
|
||||
@@ -57,6 +120,7 @@
|
||||
import Vue from 'vue'
|
||||
import { cloneDeep } from 'lodash'
|
||||
import VueDraggableResizable from 'vue-draggable-resizable'
|
||||
import { isHasPermission } from '@/utils/hasPermission'
|
||||
|
||||
Vue.component('vue-draggable-resizable', VueDraggableResizable)
|
||||
|
||||
@@ -124,6 +188,38 @@ export default {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
// 操作列数据
|
||||
operationList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
// 操作列显示更多前的最大个数
|
||||
operateMaxNum: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 1
|
||||
},
|
||||
// 操作列对于哪个字段有特殊判断
|
||||
operSpecialJudgeField: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: ''
|
||||
},
|
||||
// 操作列需要特殊判断的字段是哪些值时，过滤不符合条件按钮
|
||||
operSpecialJudgeValue: {
|
||||
type: [Array, String, Boolean],
|
||||
required: false,
|
||||
default: true
|
||||
},
|
||||
// 操作列特殊判断时需要删掉的按钮
|
||||
operSpecialJudgeDelBtn: {
|
||||
type: [String, Array],
|
||||
required: false,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@@ -193,6 +289,51 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isHasPermission,
|
||||
// 操作列特殊判断，返回经过特殊判断后的操作列数据
|
||||
operSpecialJudge (record) {
|
||||
let operationList = []
|
||||
if (typeof this.operSpecialJudgeValue === 'boolean' || typeof this.operSpecialJudgeValue === 'string') {
|
||||
// 只需要判断某个字段是否符合某一个值
|
||||
if (record[this.operSpecialJudgeField] === this.operSpecialJudgeValue) {
|
||||
// 符合特殊条件，需要过滤操作按钮
|
||||
if (this.operSpecialJudgeDelBtn && typeof this.operSpecialJudgeDelBtn === 'string') {
|
||||
// 是字符串类型，只需要过滤掉一个操作按钮
|
||||
operationList = this.operationList.filter(item => item.text !== this.operSpecialJudgeDelBtn)
|
||||
} else if (this.operSpecialJudgeDelBtn && typeof this.operSpecialJudgeDelBtn === 'object') {
|
||||
// 是数组类型需要过滤掉多个操作按钮
|
||||
operationList = this.operationList.filter(item => !this.operSpecialJudgeDelBtn.includes(item.text))
|
||||
} else {
|
||||
operationList = this.operationList
|
||||
}
|
||||
} else {
|
||||
// 不符合条件，不需要过滤
|
||||
operationList = this.operationList
|
||||
}
|
||||
} else if (typeof this.operSpecialJudgeValue === 'object') {
|
||||
// 需要判断某个字段是否符合某些值
|
||||
if (this.operSpecialJudgeValue.includes(record[this.operSpecialJudgeField])) {
|
||||
// 符合特殊条件，需要过滤操作按钮
|
||||
if (this.operSpecialJudgeDelBtn && typeof this.operSpecialJudgeDelBtn === 'string') {
|
||||
// 是字符串类型，只需要过滤掉一个操作按钮
|
||||
operationList = this.operationList.filter(item => item.text !== this.operSpecialJudgeDelBtn)
|
||||
} else if (this.operSpecialJudgeDelBtn && typeof this.operSpecialJudgeDelBtn === 'object') {
|
||||
// 师叔祖类型需要过滤掉多个操作按钮
|
||||
operationList = this.operationList.filter(item => !this.operSpecialJudgeDelBtn.includes(item.text))
|
||||
} else {
|
||||
operationList = this.operationList
|
||||
}
|
||||
} else {
|
||||
// 不符合条件，不需要过滤
|
||||
operationList = this.operationList
|
||||
}
|
||||
}
|
||||
return operationList
|
||||
},
|
||||
// 操作栏按钮点击
|
||||
operationClick (operation, record) {
|
||||
this.$emit('operationClick', operation, record)
|
||||
},
|
||||
// 将父组件的columns进行处理：增加设置列按钮
|
||||
setResultColumns (columns) {
|
||||
// 深度克隆，防止直接修改父组件数据
|
||||
|
||||
Reference in New Issue
Block a user