表格展开行样式修改

<template>
  <div>
    <el-tree class="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick">
      <span slot-scope="{ node, data }">
        <i :class="data.icon" :style="`color: ${data.color}`"></i>
        <span style="padding-left: 4px">{{ node.label }}</span>
      </span>
    </el-tree>

    <!-- 表格 -->
    <el-table ref="table" :data="tableData" style="width: 100%">

      <el-table-column width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="toogleExpand(scope.row)">{{scope.row.isUnfold ? '收起' : '展开'}}</el-button>
        </template>
      </el-table-column>

      <el-table-column type="expand" width="2">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>


      <el-table-column label="商品 ID" prop="id">
      </el-table-column>
      <el-table-column label="商品名称" prop="name">
      </el-table-column>
      <el-table-column label="描述" prop="desc">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: "一级 1",
          icon: "el-icon-s-custom",
          color: "blue",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          icon: "el-icon-s-opportunity",
          color: "red",
          children: [
            {
              icon: "el-icon-document",
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
        icon: "icon",
      },

      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }]
    };
  },
  created() {
    this.tableData.forEach(item => {
      item.isUnfold = false
    })
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    toogleExpand(row) {
      let $table = this.$refs.table;
      console.log('$table', $table)
      this.tableData.forEach((item) => {
        if (row.id == item.id) {
          item.isUnfold = !item.isUnfold
          $table.toggleRowExpansion(row)
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.tree {
  /deep/ .el-tree-node__content {
    padding: 0 !important;
  }

  /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  /deep/ .el-tree-node__children {
    padding-left: 16px;
  }

  // 竖线
  /deep/ .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  /deep/ .el-tree-node:last-child::before {
    height: 38px;
  }

  // 横线
  /deep/ .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  /deep/ &>.el-tree-node::after {
    border-top: none;
  }

  /deep/ &>.el-tree-node::before {
    border-left: none;
  }

  /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }

  // /deep/ .is-leaf {
  //   // display: none; // 也可以去掉
  // }
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

/deep/ .el-table__expand-icon .el-icon-arrow-right:before{
content: ''
}
</style>