vue3封装elementUi表格组件_vue3 封装elementui表格组件

<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>