上代码:
<div class="content-table">
<Table border :columns="columns" :data="dataList" :height="tableHeight" ref="table">
<template slot-scope="{ row }" slot="operation">
<Button type="primary" @click="detail(row)">详细</Button>
</template>
<template slot-scope="{ row }" slot="lvl">
<span>{{row.lvl == 1?'正常':row.lvl == 2?'紧急':row.lvl == 3?'非常紧急':''}}</span>
</template>
</Table>
</div>
js data
columns: [{
title: '序号',
type: 'index',
align: 'center',
width: '180px'
},
{
title: '编号',
key: 'number',
align: 'center',
width: '180px'
},
{
title: '任务名称',
key: 'taskname',
align: 'center',
width: '180px'
},
{
title: '紧急程度',
slot: 'lvl',
align: 'center',
width: '180px',
},
{
title: '工作量(小时)',
key: 'len',
align: 'center',
width: '180px'
},
{
title: '接单人',
key: 'jdrname',
align: 'center',
width: '180px'
},
{
title: '项目名称',
key:'projectname',
align: 'center',
width: '180px',
},
{
title: '项目负责人',
key:'leadername',
align: 'center',
width: '180px',
},
{
title: '技术负责人',
key:'directorname',
align: 'center',
width: '180px',
},
{
title: '督导人',
key:'ddrname',
align: 'center',
width: '180px',
},
{
title: '完成情况',
key:'state',
align: 'center',
width: '180px',
render: (h, params) => {
return h("div", {
style: {
color: params.row.state == 3 ? 'yellow' : params.row.state == 4?'green':params.row.state == 5?'red':'',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
}, params.row.state == 3?'暂未完成':params.row.state == 4?'正常完成':params.row.state == 5?'超时完成':'')
},
},
{
title: '操作',
align: 'center',
width: '200px',
slot: 'operation',
fixed: 'right'
},
],
效果图:
总结:slot后期维护相比render,更简便(前期实现效果都可以实现)