table 超级详细的商品订单列表

最新推荐文章于 2024-02-19 11:08:35 发布
Passerby_K
最新推荐文章于 2024-02-19 11:08:35 发布
阅读量4.6k
点赞数 4
分类专栏： vue element 文章标签： html html5 vue.js elementui
本文链接：https://blog.csdn.net/Passerby_K/article/details/110933793
版权
vue 同时被 2 个专栏收录
25 篇文章
订阅专栏
element
11 篇文章
订阅专栏
table 超级详细的商品订单列表

效果图如下

在这里插入图片描述
<template>
  <el-table :data="tableData"
            stripe
            row-key="id">
    <el-table-column type="selection"
                     width="55">
    </el-table-column>
    <!-- 内层table -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.child"
                  class="in_tab"
                  stripe
                  row-key="id">
          <el-table-column align="right"
                           width="80">
          </el-table-column>
          <el-table-column prop="address"
                           align="right"
                           min-width="160"
                           label="销售价">
            <template slot-scope="scope">
              <div class="mesSty">
                <img class="imgSty"
                     src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607508642445&di=0e36873f5842d9a862bf9f8f2da19510&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff3d3572c11dfa9ecc052be8060d0f703918fc12d.jpg"
                     alt="">
                <div class="mesFont">
                  <p class="pb_sty"
                     style="text-align:left"><span>{{scope.row.name}}</span></p>
                  <p>荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊 啊</p>
                  <p style="text-align:left">蓝色：10*5cm</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           align="right"
                           width="100"
                           label="销售价">
          </el-table-column>
          <el-table-column prop="address"
                           align="center"
                           label="数量">
          </el-table-column>
          <el-table-column prop="address"
                           align="center"
                           label="订单状态">
          </el-table-column>
          <el-table-column align="center"
                           label="支付方式">
            <template slot-scope="">
              <span>微信</span><span>(100积分)</span>
            </template>
          </el-table-column>
          <el-table-column prop="address"
                           align="center"
                           label="结算状态">
          </el-table-column>
          <el-table-column prop="address"
                           align="center"
                           label="账单状态">
          </el-table-column>
          <el-table-column prop="address"
                           align="center"
                           label="开票状态">
          </el-table-column>
          <el-table-column align="right"
                           label="订单总金额">
            <template slot-scope="scope">
              <span style="color:#FF2424">
                {{scope.row.address}}元
              </span>

            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>

    <el-table-column label="商品信息"
                     width="300"
                     class="box">
      <template slot-scope="scope">
        <div class="mesSty">
          <img class="imgSty"
               src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607508642445&di=0e36873f5842d9a862bf9f8f2da19510&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Ff3d3572c11dfa9ecc052be8060d0f703918fc12d.jpg"
               alt="">
          <div class="mesFont">
            <p class="pb_sty"><span>{{scope.row.name}}</span></p>
            <p>荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊荷兰艾优APIYOO电动牙阿啊阿啊 啊</p>
            <p>蓝色：10*5cm</p>
          </div>
        </div>
        <!-- 提示 -->
        <div class="item">
          <span style="margin-left:1%">订单编号：678346587485 <span>共<span style="color:#409EFF">10</span>件</span></span>
          <span class="hint_pr">下单人信息：小丸子 12786934367</span>
          <span class="hint_pr">下单时间：2020-03-03 20:23:23</span>
          <span class="hint_pr"
                style="color:#FF2424">售后中</span>
          <el-popover placement="top"
                      class="hint_pr"
                      width="220"
                      trigger="hover"
                      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
            <span slot="reference"
                  style="color:#F23645">买家备注 <i class="el-icon-tickets"></i></span>

          </el-popover>

          <el-popover placement="top"
                      class="hint_pr"
                      width="200"
                      trigger="hover">
            <div v-if="popSty"
                 class="popH">
              <el-input type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="textarea">
              </el-input>
              <div style="text-align: right; margin: 0">
                <el-button size="mini"
                           type="text"
                           @click="popClear">取消</el-button>
                <el-button type="primary"
                           size="mini"
                           @click="popEnd">确定</el-button>
              </div>
            </div>
            <div v-else>
              <p>dasjkdhkjdaks </p>
              <i class="el-icon-edit-outline iconSty"
                 @click="iconBj"></i>
            </div>
            <span slot="reference"
                  style="color:#EBA011">卖家备注 <i class="el-icon-tickets"></i></span>
          </el-popover>

        </div>
      </template>
    </el-table-column>
    <el-table-column prop="address"
                     align="right"
                     min-width="100"
                     label="销售价">
    </el-table-column>
    <el-table-column prop="address"
                     min-width="140"
                     align="center"
                     label="数量">
    </el-table-column>
    <el-table-column prop="address"
                     min-width="140"
                     align="center"
                     label="订单状态">
    </el-table-column>
    <el-table-column min-width="140"
                     align="center"
                     label="支付方式">
      <template slot-scope="">
        <span>微信</span><span>(100积分)</span>
      </template>
    </el-table-column>
    <el-table-column prop="address"
                     min-width="140"
                     align="center"
                     label="结算状态">
    </el-table-column>
    <el-table-column prop="address"
                     min-width="140"
                     align="center"
                     label="账单状态">
    </el-table-column>
    <el-table-column prop="address"
                     min-width="140"
                     align="center"
                     label="开票状态">
    </el-table-column>
    <el-table-column min-width="140"
                     align="right"
                     label="订单总金额">
      <template slot-scope="scope">
        <span style="color:#FF2424">
          {{scope.row.address}}元
        </span>

      </template>
    </el-table-column>
    <el-table-column fixed="right"
                     label="操作"
                     align="center"
                     width="100">
      <template slot-scope="">
        <el-button type="text"
                   size="small">订单详情</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      popSty: false,
      textarea: '',
      tableData: [{
        ddbh: '', //订单提示信息
        xx: "",   //订单提示信息
        time: '', //订单提示信息
        sh: '',   //订单提示信息
        mjbz: '', //订单提示信息
        mjbe: '', //订单提示信息
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '12',
        child: [
          {
            id: 1,
            date: '2016-05-01',
            name: '王小虎',
            address: '12',
          },
          {
            id: 2,
            date: '2016-05-01',
            name: '王小虎',
            address: '12',
          }
        ]
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '12',
        child: []

      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '12',
        child: []
      }]
    }
  },
  methods: {
    iconBj () {
      this.popSty = true
    },
    popClear () {
      this.popSty = false
      this.textarea = ''
    },
    popEnd () {
      this.popSty = false
    },
  }
}
</script>

<style scoped>
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent;
}
.el-table--enable-row-transition >>> .el-table__body td {
  padding-top: 2%;
}
/deep/ .el-table tr {
  position: relative;
  width: 100%;
}
/deep/ .cell {
  padding-top: 3%;
}
.item {
  width: 115.5em;
  background: #eee;
  padding: 1% 0;
  position: absolute;
  top: 0;
  left: -55px;
  z-index: 1;
}
.in_tab >>> thead {
  display: none;
}
.in_tab >>> .el-table__body td {
  padding-top: 1%;
}
</style>
<style  scoped>
.hint_pr {
  padding-left: 10vh;
}
.imgSty {
  width: 80px;
  display: block;
}
.mesSty {
  display: flex;
  align-items: center;
}

.pb_sty span {
  background: #1dc8de;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.mesFont p {
  margin-block-start: 0;
  margin-block-end: 0;
}
.mesFont p:nth-child(2) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.iconSty {
  float: right;
  cursor: pointer;
}
.in_tab {
  margin-top: -2%;
}
</style>