el-table自定义 代码段记录

vue yekong 105℃

wanjunshijiecom 2021-09-04 at 19.17.10@2x

<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>

喜欢 (0)