<template>
<el-dialog class="dialogs" title="产品(BOLON-BL2020-1.65]选择规格" :visible.sync="show">
<div class="innerMain">
<div class="status">
<div class="tablehead">
<span>球镜</span>
<el-radio v-model="qiujing" label="+">+</el-radio>
<el-radio v-model="qiujing" label="-">-</el-radio>
<span>柱镜</span>
<el-radio v-model="zhujing" label="">+</el-radio>
<el-radio v-model="zhujing" label="-">-</el-radio>
</div>
<el-table
:data="tableData"
border
height="400"
style="width: 100%">
<el-table-column
v-for="(item,index) in headlist" :key="index"
:prop="item.props"
align="center"
:label="zhujing+item.title"
width="100">
<template slot="header" slot-scope="scope">
<div v-if="index==0" class="zhuqiu line">
<span class="zhu">柱镜</span>
<span class="qiu">球镜</span>
</div>
<span v-else>{{ zhujing + item.title }}</span>
</template>
<template slot-scope="scope">
<!-- <p v-if="item.props=='qiu'">{{ qiujing + scope.row.qiu }}</p>-->
<div v-for="(item2,key,index2) in scope.row" :key="index2">
<span v-if="item.props=='qiu' && item.props==key">{{ qiujing + item2 }}</span>
<div v-if="item.props==key && item.props!=='qiu'">
<div v-if="item2" class="lvkuang">
<span class="span">{{ item2 }}</span>
<div class="info">{{ qiujing + scope.row.qiu }}/{{ zhujing + item.title }}</div>
</div>
<div v-else class="lvkuang2">
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
<div class="dialogFooter">
<div @click="show=false">
<cancel/>
</div>
<div @click="show=false">
<confirm title="范围" class="fanwei ml14"/>
</div>
<div @click="show=false">
<confirm class="ml14"/>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
import cancel from '@/components/Button/cancel'
import confirm from '@/components/Button/confirm'
export default {
name: 'Brand',
components: {cancel, confirm},
props: {
id: {
type: String,
default() {
return ''
}
}
},
data() {
return {
current: 1,
show: false,
status: 0,
total: 0,
index: 0,
qiujing: '+',
zhujing: '',
selectedAll: false,
checkList: [],
headlist: [{
title: '',
props: 'qiu'
}, {
title: '0.00',
props: 's000'
}, {
title: '0.25',
props: 's025'
}, {
title: '0.50',
props: 's050'
}, {
title: '0.75',
props: 's075'
}, {
title: '1.00',
props: 's100'
}, {
title: '1.25',
props: 's125'
}, {
title: '1.50',
props: 's150'
}, {
title: '1.75',
props: 's175'
}, {
title: '2.00',
props: 's200'
}, {
title: '2.25',
props: 's225'
}, {
title: '2.50',
props: 's250'
}, {
title: '2.75',
props: 's275'
}, {
title: '3.00',
props: 's300'
}, {
title: '3.25',
props: 's325'
}, {
title: '3.50',
props: 's350'
}, {
title: '3.75',
props: 's375'
}],
tableData: [
{
qiu: '0.00',
s000: 1,
s025: 1,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '0.25',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '0.50',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '0.75',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '1.00',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '1.25',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '1.50',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '1.75',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '2.00',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
}, {
qiu: '2.25',
s000: 1,
s025: 0,
s050: 0,
s075: 0,
s200: 0,
s225: 0,
s250: 0,
s275: 0,
s300: 0,
s325: 0,
s350: 0,
s375: 0,
},],
multipleSelection: []
}
},
watch: {},
mounted() {
},
methods: {
getshow() {
this.show = true
},
}
}
</script>
<style lang="scss" scoped>
.Brand {
width: 1562px;
min-height: 477px;
background: #FFFFFF;
box-shadow: 0px 8px 17px 1px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.innerMain {
.innerhead {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
.innerheadl {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.innerheadl2 {
overflow-x: scroll;
width: 1000px;
height: 40px;
::v-deep {
.el-checkbox__label {
font-size: 14px;
}
}
}
.innerheadr {
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
}
}
.dialogFooter {
height: 81px;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
border-top: 1px solid rgba(233, 233, 233, 1);
margin-top: 40px;
}
.list {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-bottom: 45px;
.listitem1 {
width: 314px;
height: 64px;
background: #02BFA1;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 20px;
font-family: PingFang;
font-weight: 500;
color: #FEFFFF;
img {
width: 20px;
height: 20px;
margin-right: 21px;
}
}
.listitem2 {
width: 314px;
height: 64px;
background: #FF7E00;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
font-size: 20px;
font-family: PingFang;
font-weight: 500;
color: #FEFFFF;
img {
width: 18px;
height: 20px;
margin-right: 21px;
}
}
}
.tablehead {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
padding-bottom: 20px;
span {
margin-right: 20px;
}
}
.tablex {
width: 100%;
}
.line {
background: linear-gradient(45deg, transparent 49.5%, #B0B0B0 49.5%, #B0B0B0 50.5%, transparent 50.5%);
width: 100%;
position: relative;
height: 40px;
}
.zhuqiu {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.zhu {
margin-left: 30px;
}
.qiu {
margin-right: 30px;
}
}
.lvse {
}
.lvkuang {
height: 50px;
width: 100%;
border: 1px solid #228800;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
.span {
height: 30px;
}
.info {
width: 100%;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
color: #fff;
font-size: 14px;
background: #228800;
}
}
.lvkuang2 {
height: 50px;
width: 100%;
}
.fanwei {
background: #4091F5;
border: 1px solid #4091F5;
}
</style>
