95 lines
2.3 KiB
Vue
95 lines
2.3 KiB
Vue
<!--
|
|
* @Date: 2020-12-14 09:07:03
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2021-06-21 12:07:42
|
|
* @FilePath: \basic-admin\src\components\BaseTable\subcomponents\MethodBtn.vue
|
|
* @Description: table右侧方法组件
|
|
-->
|
|
<template>
|
|
<el-table-column
|
|
v-if="methodList.length > 0"
|
|
slot="handleBtn"
|
|
prop="operation"
|
|
:label="'tableHeader.operation' | i18nFilter"
|
|
:width="trueWidth"
|
|
align="center"
|
|
:fixed="isFixed ? 'right' : false"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span
|
|
v-for="(item, index) in methodList"
|
|
:key="'btn' + index"
|
|
>
|
|
<el-button
|
|
v-show="item.showParam ? (item.showParam.type === 'unequal' ?
|
|
scope.row[item.showParam.name] !== item.showParam.value : item.showParam.type === 'equal' ?
|
|
scope.row[item.showParam.name] === item.showParam.value : item.showParam.type === 'more' ?
|
|
scope.row[item.showParam.name] > item.showParam.value : item.showParam.type === 'less' ?
|
|
scope.row[item.showParam.name] < item.showParam.value : item.showParam.type === 'indexof' ?
|
|
item.showParam.value.indexof(scope.row[item.showParam.name]) >= 0 : false
|
|
) : true"
|
|
type="text"
|
|
:style="{color:(item.type === 'delete' ? '#D40000' : '#1990FF')}"
|
|
style="font-size:14px"
|
|
size="mini"
|
|
@click="clickButton({
|
|
data: scope.row,
|
|
type: item.type
|
|
})"
|
|
>{{ item.btnName | i18nFilter }}</el-button>
|
|
<span v-if="index < methodList.length-1" style="margin:0 3px">|</span>
|
|
</span>
|
|
</template>
|
|
|
|
</el-table-column>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
/**
|
|
* 传入的组件prop格式
|
|
* methodList<MethodItem> = []
|
|
* Interface MethodItem = {
|
|
* btnName: string,
|
|
* type: string,
|
|
* callback: function (选用)
|
|
* }
|
|
*
|
|
*/
|
|
export default {
|
|
props: {
|
|
methodList: {
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: () => 0
|
|
},
|
|
isFixed: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
computed: {
|
|
trueWidth() {
|
|
return this.width ? this.width : this.methodList.length * 80
|
|
}
|
|
},
|
|
methods: {
|
|
clickButton(raw) {
|
|
this.$emit('clickBtn', {
|
|
data: raw.data,
|
|
type: raw.type
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|