<template>
<el-table
ref="refTable"
:data="tableData.data"
:style="{ width: '100%', ...cellStyle }"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
:max-height="tableHeight"
@selection-change="handleSelectionChange"
@select="handleSelectChange"
@select-all="handleSelectAllChange"
>
<el-table-column v-if="selectShow" type="selection" width="55" />
<el-table-column
v-for="item in tableData.titles"
:key="item.prop"
:prop="item.prop"
:label="item.title"
:width="item.width"
show-overflow-tooltip
>
<template v-if="item?.custom" #default="scope">
<slot :name="item.title" :scope="scope"></slot>
</template>
</el-table-column>
<template #empty>
<div class="empty" :style="{ height: tableHeight - 44 + 'px', ...cellStyle }">暂无数据</div>
</template>
</el-table>
</template>
<script setup>
import { ref } from 'vue'
//暂无数据列表
let props = defineProps({
// 表格数据以及表头数据
tableData: {
type: Object,
default: () => {
return {}
},
},
// 设置斑马纹的颜色
// stripeColor: {
// type: String,
// default: '#fff',
// },
// 表格高度
tableHeight: {
type: Number,
default: 500,
},
// 表头样式
headerCellStyle: {
type: Object,
default: () => {
return { color: '#232932', background: '#f5f5f5' }
},
},
// 表格样式
cellStyle: {
type: Object,
default: () => {
return { color: '#646a73', background: '#f5f5f5' }
},
},
// 是否显示选择栏
selectShow: {
type: Boolean,
default: true,
},
})
let emit = defineEmits(['selectionChange', 'delete', 'selectChange', 'selectAllChange'])
// 选中项发生改变
const handleSelectionChange = (selection) => {
emit('selectionChange', selection)
}
// 手动触发勾选
const handleSelectChange = (selection, row) => {
emit('selectChange', selection, row)
}
// 手动触发全选
const handleSelectAllChange = (selection) => {
emit('selectAllChange', selection)
}
const refTable = ref()
// 回显选中
const handleEcho = (echoData) => {
clearSelection()
if (echoData && echoData.length) {
for (const row of echoData) {
refTable.value.toggleRowSelection(row, true)
}
}
}
// 清空选择
const clearSelection = () => {
refTable.value.clearSelection()
}
defineExpose({ handleEcho, clearSelection })
</script>
<style lang="scss" scoped>
.resource_button {
cursor: pointer;
}
:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
background: v-bind('props.stripeColor');
}
:deep(.el-table__header th .cell) {
border-right: 1px solid #dfdfdf;
}
:deep(.el-table__header th:last-child .cell) {
border-right: none;
}
.empty {
text-align: center;
width: 100%;
display: flex;
align-items: center;
}
</style>
调用组件
<template>
<div ref="rightTable" class="right-table">
<TableList
ref="tableList"
:table-data="tableData"
:table-height="appManageHeight"
@selection-change="handleSelectionChange"
>
<template #角色="{ scope }">
<span>{{ scope.row.type == 0 ? '管理员' : '普通用户' }}</span>
</template>
</TableList>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import TableList from '@/components/tableGroup/tableList.vue'
import { debounce } from 'lodash'
const tableData = reactive({
data: [
{
nickName: '张三',
username: 'zhangsan',
type: 0,
orgName: '华为',
},
{
nickName: '李四',
username: 'lisi',
type: 1,
orgName: '腾讯',
},
{
nickName: '王五',
username: 'wangsu',
type: 1,
orgName: '阿里',
},
{
nickName: '赵六',
username: 'zhaoliu',
type: 0,
orgName: '京东',
},
],
titles: [
{
title: '用户',
prop: 'nickName',
},
{
title: '登录账号',
prop: 'username',
},
{
title: '角色',
prop: 'type',
custom: true,
},
{
title: '所属企业',
prop: 'orgName',
},
],
})
// 选中项发生改变
const handleSelectionChange = debounce((val) => {
console.log('val---', val);
}, 100)
const rightTable = ref()
const appManageHeight = ref(0)
onMounted(() => {
appManageHeight.value = rightTable.value ? rightTable.value.clientHeight - 50 : 500
})
</script>