75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "AppKgTable",
|
||
|
|
label: "表格",
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
tableData:[],
|
||
|
|
columns:[
|
||
|
|
{label: "重点单品", prop: "name"},
|
||
|
|
{label: "当日目标", prop: "targetNum", width: "70px"},
|
||
|
|
{label: "销售数量", prop: "saleNum", width: "70px"},
|
||
|
|
{label: "库存数量", prop: "stockNum", width: "70px"},
|
||
|
|
{label: "预计销售数量", prop: "preSaleNum"},
|
||
|
|
{label: "提醒", custom: 1, width: 70, align: 'center', prop: "remind"},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<section class="AppKgTable">
|
||
|
|
<div class="subTiltle" v-text="'表格标题'"/>
|
||
|
|
<el-table :data="tableData" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="440px">
|
||
|
|
<el-table-column v-for="column in columns" v-bind="column" :key="column.prop">
|
||
|
|
<template v-slot="{row}">
|
||
|
|
<div v-if="column.custom" :style="{color: row.preSaleNum > row.stockNum ? 'red' : '#fff'}" v-text="'周边库存情况'"/>
|
||
|
|
<span v-else v-text="row[column.prop] || ''"/>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.AppKgTable {
|
||
|
|
color: #fff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .tableHeader {
|
||
|
|
background: rgba(13, 48, 99, 0.6) !important;
|
||
|
|
color: #fff;
|
||
|
|
border-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .el-table tr {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .el-table {
|
||
|
|
background: transparent;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .el-table:before {
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .tableCell {
|
||
|
|
color: #fff;
|
||
|
|
border-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.AppKgTable .subTiltle {
|
||
|
|
line-height: 20px;
|
||
|
|
width: fit-content;
|
||
|
|
margin: 24px auto 12px;
|
||
|
|
background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 2px;
|
||
|
|
background-position: center bottom;
|
||
|
|
}
|
||
|
|
</style>
|