tabel里面样式总结

 <el-table-column prop="labelList" label="客户标签" min-width="250">
          <template slot-scope="scope">
            <template v-if="scope.row.labels.length">
              <el-row class="row-tag">
                <el-col :span="20" :class="scope.row.showTags?'':'isUnfold'">
                  <span class="span-tag" v-for="(item,index) in scope.row.labels" :key="index" :title="item">
                    <el-tooltip :content="item" placement="top">
                      <span>{{ item }}</span>
                    </el-tooltip>
                  </span>
                </el-col>
                <el-col :span="4">
                  <a style="border:0;" @click="scope.row.showTags = !scope.row.showTags"><i :class="scope.row.showTags?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                    {{ scope.row.showTags ? '收起': '展开' }}</a>
                </el-col>
              </el-row>
            </template>
            <template v-else>-</template>
          </template>
        </el-table-column>




.row-tag {
  .el-col-4 {
    width: 100px;
  }
  .el-col-20 {
    width: calc(100% - 100px);
  }
  .isUnfold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .span-tag {
    display: inline-block;
    width: 78px;
    height: 28px;
    padding: 0 5px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color: #0083ff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #e8f4ff;
    border-radius: 2px;
    margin: 0 10px 3px 0;
  }
}

 <el-table-column
                slot="headSalesName"
                label="线下活动负责人"
                min-width="150"
                align="left"
              >
                <template slot-scope="scope">
                  <div class="flex flex-t-center">
                    <img :src="scope.row.avatar ? scope.row.avatar : defaultface" class="avatar-box" alt="">
                    <span>{{ scope.row.headSalesName ? scope.row.headSalesName : '--'}}</span>
                  </div>
                </template>
              </el-table-column>

.flex {
  display: flex;
  display: -webkit-flex;
}

.flex-t-center {
  align-items: center;
}
.avatar-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 5px;
}

 <el-table-column slot="users" label="引流成员" width="170">
          <template slot-scope="scope">
            <div class="users-box" v-if="scope.row.memberList && scope.row.memberList.length">
              <div class="flex flex-t-center users-box-list" v-for="(item, index) in scope.row.memberList" :key="index">
                <img :src="item.avatar ? item.avatar : defaultface" class="avatar-box" alt />
                <el-tooltip class="item" effect="dark" :content="item.accountName" placement="top-start" :disabled="item.accountName && item.accountName.length > 6 ? false: true">
                  <span>{{ getName(item.accountName)}}</span>
                </el-tooltip>
              </div>
            </div>
            <div v-else class="users-box">
              <div class="flex flex-t-center users-box-list">
                 <img :src="defaultface" class="avatar-box" alt />
                 <span>--</span>
              </div>
            </div>
          </template>
        </el-table-column>

.users-box {
  max-height: 90px;
  overflow-y: auto;
  .users-box-list {
   margin-bottom: 5px;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.flex {
  display: flex;
  display: -webkit-flex;
}

.flex-t-center {
  align-items: center;
}
.avatar-box {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 5px;
}

 <div class="tableContainer">
          <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" default-expand-all
            @selection-change="handleSelectionChange" :row-class-name="cellClass"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="selection" width="60">
            </el-table-column>
            <el-table-column prop="goods" label="商品" width="260" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="prise" label="订单金额" width="80">
            </el-table-column>
            <el-table-column prop="person" label="购买人">
            </el-table-column>   
            <el-table-column prop="person" label="操作" fixed="right" align="right" width="180px">
              <template slot-scope="{row}">
                <span @click="toOrderDetail(row.id)" style="color:#0083FF;" v-if="row.children==undefined">详情</span>
                <p class="tablePerson" style="color:#333333;" v-else><span>企微员工：</span><img src="" alt=""><span
                    style="color: #74788D;">昌云婷</span></p>
              </template>
            </el-table-column>
          </el-table>

data(){
   return{
		tableData: [{
        id: 3,
        goods: '订单编码: 225214524151212',
        prise: '',
        person: '',
        children: [{
          id: 31,
          goods: '幸运方便面',
          prise: '12.00',
          person: '王小虎'
        }, {
          id: 32,
          goods: '幸运方便面',
          prise: '12.00',
          person: '王小虎'
        }]
      }, 
   }
}

methods(){
 cellClass({row}) { // 为行添加class属性
      if (!row.hasOwnProperty('children')) { //  指示对象自身属性中是否具有指定的属性 
        return 'disableheadselection' 
      } else {
        return 'orderCode'
      }
    },
}

  .tableContainer {
      background-color: #fff;

      /deep/ .el-table__expand-icon {// 去掉箭头
        display: none;
      }

      /deep/ .disableheadselection {
        color: #8c8c8c;

        >td:first-child {
          >.cell {
            >.el-checkbox {// 去掉下级的多选
              display: none;
            }
          }

        }
      }

      /deep/ .orderCode {
        color: #333333;
      }
 }  

 <el-table-column label="员工账号 " prop="loginName"  width="180">
            <span slot-scope="scoped" class="member-info">
                <img class="user-avatar" :src="scoped.row.avatar" alt="">
                <div>
                  <h6><i :title="scoped.row.loginName">{{scoped.row.loginName}}</i> <span v-if="scoped.row.isLeaderInDept === 1">上级</span></h6>
                  <p>{{scoped.row.phoneNumber}}</p>
                </div>
              </span>
        </el-table-column>
.member-info {
  display: flex;
  align-items: center;
  > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 90%;
  }
  h6 {
    color: #000;
    font-weight: normal;
    height: 25px;
    i {
      float: left;
      max-width: 60%;
      overflow: hidden;
      height: 25px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    span {
      height: 18px;
      line-height: 18px;
      padding: 0 5px;
      background-color: #d1e9ff;
      color: #1890ff;
      font-size: 12px;
      border-radius: 2px;
      display: inline-block;
      margin-left: 5px;
    }
  }
  p {
    color: #666666;
    height: 20px;
  }
}
.user-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
}