vue3封装el-table

<template>

  <!-- tableData:  接口获取的列表值

        tableDateList:{

                      prop:  label的key值

                      label:  表格的lable值

                      width:  表格的宽度

                      idFormatter: 表格自定义方法,可用来转译字段  例如:idFormatter (row){row.sex==0?男:女}

                      align:   文字对齐方式

                      operate :是否显示操作栏按钮

                      buttonList:[{

                            text:   按钮中文名称

                      }  ]        

        }

        handleSelectionChange(选中行数据):    多选时传递给父组件获取选中项

        handleClick(点击行数据,点击按钮名称)    点击操作栏传给父组件数据

        slotIndex:    是否显示序号

        isSelection:  是否显示多选

    -->

  <el-table

    border

    :data="tableData"

    style="width: 100%; height: calc(100vh - 420px)"

    @selection-change="handleSelectionChange"

  >

    <el-table-column v-if="isSelection" type="selection" width="55" />

    <el-table-column v-if="slotIndex" type="index" label="序号" width="150" />

    <el-table-column

      v-for="item in tableDateList"

      :key="item.prop"

      :prop="item.prop"

      :label="item.label"

      :width="item.width"

      :formatter="item.idFormatter"

      :align="item.align"

      show-overflow-tooltip

    >

      <template #default="scope" v-if="item.operate">

        <el-button

          link

          type="primary"

          v-for="items in item.buttonList"

          :key="items.text"

          size="small"

          @click="handleClick(scope, items.text)"

          >{{ items.text }}</el-button

        >

      </template>

    </el-table-column>

  </el-table>

</template>

<script  setup>

import { ref, defineProps, onMounted, toRaw, computed, watch } from "vue";

const emit = defineEmits(["doSth"]);

onMounted(() => {

  console.log(props.tableDateList);

});

const props = defineProps({

  tableDateList: [],

  tableData: [],

  slotIndex: false,

  isSelection: false,

  handleSelectionChange: {

    type: Function,

    default: () => {},

  },

  handleClick: {

    type: Function,

    default: () => {},

  },

});

const tableDatas = computed(() => {

  // const list =toRaw(props)

  return props.tableData;

});

</script>