示例图

实现代码：

<template>
  <div>
    <el-table
      :data="tableData"
      border
      :style="style"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" v-if="selection" />
      <el-table-column
        width="200"
        :prop="item.file"
        :label="item.name"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="scope">
          <el-button
            :link="link"
            type="primary"
            size="small"
            @click="handleLock(scope, true)"
            v-if="scope.row.lock && buttonShow['lock']"
            >锁定</el-button
          >
          <el-button
            v-if="!scope.row.lock && buttonShow['unlock']"
            :link="link"
            type="primary"
            size="small"
            @click="handleLock(scope, false)"
            >解除锁定</el-button
          >
          <el-button
            v-if="buttonShow['edit']"
            :link="link"
            type="warning"
            size="small"
            @click="handleEdit(scope)"
            >编辑</el-button
          >
          <el-button
            v-if="buttonShow['resetPasswords']"
            :link="link"
            type="info"
            size="small"
            @click="handleResetPasswords(scope)"
            >重置密码</el-button
          >
          <el-button
            v-if="buttonShow['delete']"
            :link="link"
            type="danger"
            size="small"
            @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--分页 -->
  <Pagination v-if="pagination" />
</template>

<script lang="ts" setup>
import Pagination from "@/views/basicData/components/pagination.vue";
import { defineProps } from "vue";
defineProps({
  // 表头
  tableHeader: {
    type: Object,
    defualt: () => {},
  },
  // 操作按钮显示
  buttonShow: {
    type: Object,
    defualt: () => {},
  },
  // 表数据
  tableData: {
    type: Array,
    defualt: () => [],
  },
  // 按钮是否有border
  link: {
    type: Boolean,
    defualt: false,
  },
  // 否需要勾选
  selection: {
    type: Boolean,
    defualt: false,
  },
  // 是否显示页码
  pagination: {
    type: Boolean,
    defualt: false,
  },
  // 表单宽度设置
  style: {
    type: String,
    defualt: "width: 100%",
  },
});
// 修改
const handleSelectionChange = (val) => {
  console.log(val, "---");
};
// 锁定
const handleLock = (scope, boo) => {
  console.log(scope.row, boo, "----");
};
// 编辑
const handleEdit = (scope) => {
  console.log(scope.row, "----");
};
// 重置密码
const handleResetPasswords = (scope) => {
  console.log(scope.row, "----");
};
// 删除
const handleDelete = (scope) => {
  console.log(scope, "----");
};
</script>

父组件传入子组件数据格式：

<template>
  <div>
  <List
      :tableData="tableData"
      :tableHeader="conditionQuery"
      :buttonShow="buttonShow"
    />
</div>
</template>
<script lang="ts" setup>
import List from "@/components/list.vue";
const buttonShow = ref({
  delete: true,
  resetPasswords: false,
  edit: true,
  unlock: false,//
  lock: false, //是否显示锁定按钮
});
const tableData = ref([]);
const conditionQuery = ref([]);
onMounted(() => {
  handleGetConditionQuery();
});
const handleGetConditionQuery = () => {
  conditionQuery.value = [
    { file: "characterCode", name: "字库代码"},
    { file: "goodsAllocation", name: "货位"  },
    { file: "sapCode", name: "SAP库位代码"},
    { file: "sapCode1", name: "子库描述"},
    { file: "sapCode2", name: "货位描述" },
    { file: "sapCode3", name: "所属作业中心简称" },
    { file: "other", name: "其他" },
  ];
  tableData.value = [
    {
      characterCode: 456,
      goodsAllocation: 456,
      sapCode: 456,
      sapCode1: 456,
      sapCode2: 456,
      sapCode3: 456,
      other: 456,
      lock: true, //是否锁定的状态
    },
    {
      characterCode: 456,
      goodsAllocation: 456,
      sapCode: 456,
      sapCode1: 456,
      sapCode2: 456,
      sapCode3: 456,
      lock: true,
      other: 456,
    },
    {
      characterCode: "kokokok",
      goodsAllocation: "kokokok",
      sapCode: "kokokok",
      sapCode1: "kokokok",
      sapCode2: "kokokok",
      sapCode3: "kokokok",
      other: "kokokok",
      lock: true,
    },
    {
      characterCode: 456,
      goodsAllocation: 456,
      sapCode: 456,
      sapCode1: 456,
      sapCode2: 456,
      sapCode3: 456,
      lock: true,
      other: 456,
    },
    {
      characterCode: 456,
      goodsAllocation: 456,
      sapCode: 456,
      sapCode1: 456,
      sapCode2: 456,
      sapCode3: 456,
      lock: true,
      other: 456,
    },
  ];
};
</script>

<style scoped></style>