子组件

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="col,colIndex in columns" :key="colIndex">{{ col.title }}</th>
        </tr>
      </thead>
      <tbody v-if="instList.length >0">
        <tr v-for="(row,rowIndex) in instList" :key="row.id" @click="onClick(row)">
          <td v-for="col,colIndex in columns" :key="colIndex">
            <template v-if="'slot' in col">
              <slot :row="row" :column="col" :index="rowIndex" :name="col.slot" />
            </template>
            <template v-else>{{ row[col.key] }}</template>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr><td colspan="7">暂无数据</td></tr>
      </tbody>

    </table>
  </div>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => { [] }
    },
    instList: {
      type: Array,
      default: () => { [] }
    }
  },
  methods: {
    onClick(row) {
      this.$emit('onClick', row)
    }
  }
}
</script>
<style lang="scss" scoped>
  table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #e9e9e9;
  }
  table th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
  }
  table td, table th{
   color: #666;
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
  }
</style>

父组件

    <project-table :columns="columns" :inst-list="instList" @onClick="onClick">
      <template #zhuangtai="{ row, index }">
        <div class="text-center">
          <div class="circle" :class="row.yan_qi_zhuang_tai_==1?'error':row.yan_qi_zhuang_tai_==2?'success':row.yan_qi_zhuang_tai_==3?'warning':''" />
        </div>
      </template>
    </project-table>
import ProjectTable from './table'
 data() {
    return {
      instList: [
        { xiang_mu_id_: '项目名称1',
          xiang_mu_jin_du_: '50%',
          rl_cheng_ben_bi_: '10000',
          yan_qi_zhuang_tai_: 1
        },
        { xiang_mu_id_: '项目名称2',
          xiang_mu_jin_du_: '50%',
          rl_cheng_ben_bi_: '10000',
          yan_qi_zhuang_tai_: 2
        },
        { xiang_mu_id_: '项目名称3',
          xiang_mu_jin_du_: '50%',
          rl_cheng_ben_bi_: '10000',
          yan_qi_zhuang_tai_: 3
        }

      ],
      columns: [
        { title: '项目名称', key: 'xiang_mu_id_' },
        { title: '项目进度', key: 'xiang_mu_jin_du_' },
        { title: '人力成本', key: 'rl_cheng_ben_bi_' },
        { title: '延期状态', key: 'yan_qi_zhuang_tai_', slot: 'zhuangtai' }
      ],
    }
}
methods: {
    onClick(row) {
      console.log('row-------', row)
      this.title = row.xiang_mu_id_
      this.showPopup = true
    },
}

.circle{
   width: 20px;
   height: 20px;
   border-radius: 50%;
   &.error{
      background-color: #f23d01;

   }
   &.success{
      background-color: rgb(93, 247, 69);

   }
   &.warning{
      background-color: rgb(246, 236, 45);

   }
}