效果

像这样的表格我们可以这样划分一下区域：

• 1区域的渲染是通过取反插槽的条件 
• 2区域的渲染是写在 slot 插槽的内部的，直接显示行数据
• 3区域的渲染是通过具名插槽 bind 渲染

直接上代码：

子组件：

父组件：

const tableColumns = [   { id: 0, type: 'index', align: 'center', width: '55' },   { id: 1, label: '姓名', prop: 'name' },   { id: 2, label: '学号', prop: 'studentId' },   { id: 3, label: '邮箱', prop: 'email' },   { id: 4, label: '专业', prop: 'profession' },   { id: 5, label: '意愿部门', prop: 'department' },   { id: 6, label: '自我介绍', prop: 'introduction', width: '200' },   { id: 7, label: '是否通过', prop: 'status', type: 'tag' },   { id: 8, label: '操作', prop: 'operate', width: '180' } ];   // 注意观察 // 1. 子组件的 `default.${column.prop}` // 2. 父组件的 #default.operate="{ row }" // 3. 数据的 prop 的属性值

就这么简单！其他功能自行拓展即可，欢迎三连，谢谢