子组件

<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);}
}