DynamicTable.vue
<template>
<div class="dynamic_table"
:class="diyClass">
<el-table :data="data"
:element-loading-background="loadBg"
v-loading="loading"
empty-text='暂无数据'
@row-click="rowClick">
<el-table-column type="index">
</el-table-column>
<el-table-column :label="item.cn"
v-for="(item,index) in headerArr"
:key="index"
:width="item.width || 'auto'">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row[item.en] }}</span>
</template>
</el-table-column>
<el-table-column label="操作"
width="150"
column-key="option"
v-if="optionsArr && optionsArr.length>0 || optionOpen">
<template slot-scope="scope">
<el-button size="mini"
type="primary"
v-if="arrIncludes(optionsArr,'update')"
@click="updateRow(scope.row)">修改</el-button>
<el-button size="mini"
type="danger"
v-if="arrIncludes(optionsArr,'del')"
@click="delRow(scope.row)">删除</el-button>
<!-- 自定义操作按钮 -->
<slot name="options"
v-bind:scopeRow="scope.row">
</slot>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props: {
// 表头数组 [{cn: 'label', en: 'key',width }]
headerArr: {
type: Array,
default: function () {
return []
}
},
// 行数据
data: {
type: Array,
default: function () {
return []
}
},
// 是否加载中
loading: {
type: Boolean,
default: false
},
// 是否开启option
optionOpen: {
type: Boolean,
default: false
},
// 操作数组 ['update','del']
optionsArr: {
type: Array,
default: function () {
return []
}
},
// 自定义class
diyClass: {
type: String,
default: ''
},
// 加载中背景颜色
loadBg: {
type: String,
default: ''
}
},
components: {
},
data () {
return {
};
},
computed: {
},
created () {
},
mounted () {
},
watch: {
},
methods: {
updateRow (row) {
this.$emit('updateRow', row);
},
delRow (row) {
this.$emit('delRow', row);
},
arrIncludes (arr, item) {
return arr.includes(item)
},
rowClick (row, column, event) {
this.$emit('rowClick', row, event, column)
}
},
};
</script>
<style scoped lang="scss">
</style>
use
<dynamic-table :headerArr="headerArr"
:data="listArr"
:optionsArr="optionsArr"
:loading="loading"
:loadBg="'rgba(12,27,46,0.5)'"
diyClass="diy_class"
@rowClick="rowClick"
:optionOpen="true">
<template
<el-button size="mini"
type="warning"
@click="handleMsg(slotProps.scopeRow.ID)">自定义操作按钮</el-button>
</template>
</dynamic-table>
