<el-table
:data="datas"
stripe
style="width: 100%;"
>
<el-table-column fixed type="index" label="序号" width="50" style="text-align: center"> </el-table-column>
<el-table-column
prop="client_name"
label="客户"
fixed
width="80">
</el-table-column>
<el-table-column
prop="style_no"
label="款号-订单号-部门号"
width="150">
</el-table-column>
<el-table-column label="订单性质" width="80">
<template slot-scope="scope">
<el-tag v-if="scope.row.order_type == 0" type="info">${ scope.row.ordertype }</el-tag>
<el-tag v-else-if="scope.row.order_type == 1" type="success">${ scope.row.ordertype }</el-tag>
<el-tag v-else-if="scope.row.order_type == 2" type="warning">${ scope.row.ordertype }</el-tag>
<el-tag v-else-if="scope.row.order_type == 3" type="warning">${ scope.row.ordertype }</el-tag>
<el-tag v-else-if="scope.row.order_type == 4" type="danger">${ scope.row.ordertype }</el-tag>
</template>
</el-table-column>
<el-table-column
prop="tod_date"
label="出货日期" width="100">
</el-table-column>
<el-table-column
label="国别"
width="450">
<template slot="header" slot-scope="scope">
<span>国别</span>
<span style="color:#000000">(海运/</span>
<span style="color:#CC0000;">空运</span>
<span style="color:#000000">/</span>
<span style="color:#FF00FF;">铁路</span>
<span style="color:#000000">/</span>
<span style="color:#0000FF;">海空</span>
<span style="color:#000000">)</span>
</template>
<template slot-scope="scope">
<template v-for="tag in scope.row.nations">
<template v-if="tag.flag == 0">
<el-tag :key="tag.value" title="海运">
<span style="color: #000000"> ${tag.name} </span>
</el-tag>
</template>
<template v-else-if="tag.flag == 1" title="空运">
<el-tag :key="tag.value" type="success">
<span style="color: #CC0000"> ${tag.name} </span>
</el-tag>
</template>
<template v-else-if="tag.flag == 2" title="陆运铁路">
<el-tag :key="tag.value" type="warning">
<span style="color: #FF00FF"> ${tag.name} </span>
</el-tag>
</template>
<template v-else-if="tag.flag == 3" title="海空">
<el-tag :key="tag.value" type="danger">
<span style="color: #0000FF"> ${tag.name} </span>
</el-tag>
</template>
</template>
</template>
</el-table-column>
</el-table>
<el-table-column width="180">
<template slot="header" slot-scope="scope">
销售提成
<el-tooltip effect="dark" content="若销售提成按“百分比”,则根据“活动价”来计算" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</template>
<template slot-scope="scope">
...
</template>
</el-table-column>
<el-table-column
prop="address"
:render-header="renderTableHeader">
</el-table-column>
methods:{
renderTableHeader (h, { column, $index }) {
return h('div', {}, [
h('el-popover', {
ref: 'popover1',
props: {
placement: 'top-start',
title: '标题',
width: '200',
trigger: 'hover',
content: '这是一段内容,这是一段内容,这是一段内容,这是一段内容。'
}
}),
h('span', {}, [
'地址',
h('i', {
'class': 'el-icon-question',
directives: [
{
name: 'popover',
arg: 'popover1'
}
]
})
])
])
}
}