<template>
    <div id="table2">
       <el-table
        :data="tableData5"
        stripe
        row-key="id" :expand-row-keys="expands"   @row-click="rowClick"  :row-class-name="isShowIcon"
        style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
               <el-table
                    :data="props.row.child"
                    :show-header=false>
                    <el-table-column
                        prop="comp_name"
                        :show-overflow-tooltip="true"
                        width="50"
                        label="">
                        <template slot-scope="oscope"></template>
                    </el-table-column>
                    <el-table-column
                        prop="comp_name"
                        :show-overflow-tooltip="true"
                        label="商品名稱1">
                        <template slot-scope="oscope">{{oscope.row.comp_name1}}</template>
                    </el-table-column>
                    <el-table-column
                        prop="comp_name"
                        :show-overflow-tooltip="true"
                        label="商品名稱2">
                        <template slot-scope="oscope">{{oscope.row.comp_name2}}</template>
                    </el-table-column>
               </el-table>
            </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="address">
        </el-table-column>
        <el-table-column
        label="產品分類"
        prop="type">
            <template slot-scope="scope">{{scope.row.type | TypeFilter}}</template>
        </el-table-column>
        <el-table-column
        label="操作">
            <template slot-scope="scope">
                <el-button type="primary" @click.stop="editInfo">編輯</el-button>
            </template>
        </el-table-column>
    </el-table> 
    </div>
</template>
 

<script>
export default {
  data() {
    return {
      tableData5: [
        {
          id: "1",
          name: "商品1",
          address: "雲南",
          type:3,
          child:[
              {
                comp_name1:'一行商品1',
                comp_name2:'一行商品2',
              },
              {
                comp_name1:'一行商品1',
                comp_name2:'一行商品2',
              },
          ]
        },
        {
          id: "2",
          name: "商品2",
          address: "西藏",
          type:2,
          child:[
              {
                comp_name1:'二行商品1',
                comp_name2:'二行商品2',
              },
              {
                comp_name1:'二行商品1',
                comp_name2:'二行商品2',
              }
          ]
        },
        {
          id: "3",
          name: "商品3",
          address: "黑龍江",
          type:4,
          child:[
              {
                comp_name1:'三行商品1',
                comp_name2:'三行商品2',
              },
              {
                comp_name1:'三行商品1',
                comp_name2:'三行商品2',
              },
          ]
        },
        {
          id: "4",
          name: "商品4",
          address: "海南",
          type:1,
          child:[
              {
                comp_name1:'四行商品1',
                comp_name2:'四行商品2',
              }
          ]
        },
        {
          id: "5",
          name: "商品5",
          address: "重慶",
          type:0,
          child:[]
        }
      ],
      expands:[]
    };
  },
  filters:{
      TypeFilter(val){
        if(val==1){
            return '食品'
        }else if(val==2){
            return '紡織'
        }else if(val==3){
            return '教育'
        }else if(val==4){
            return '家居'
        }else{
            return '未知'
        }
      }
  },
  methods:{
      editInfo(){  //編輯

      },
      isShowIcon(row, index){
        if(row.row.child.length>0)
            return ''
        else
            return 'hiderow'
      },
      rowClick(row, event, column) {   //控制展開行
        var NoIndex = column.type.indexOf("expand");
        if (NoIndex == 0 && row.child.length <= 0) {
            this.expands = [];
            return;
        }
        if (row.child.length > 0) {   
            Array.prototype.remove = function(val) {
            let index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
            };
            if (this.expands.indexOf(row.id) < 0) {  //確保只展開一行
                this.expands.shift();
                this.expands.push(row.id);
            } else {
                this.expands.remove(row.id);
            }
        } else {
            return;
        }
    },
  }
};
</script>
 

<style>
    #table2 .el-table__expanded-cell{
      padding:0 !important;
      border-bottom: none;
    }
    .hiderow .el-table__expand-column .el-icon {
      visibility: hidden;
    }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
    .tabBg {
      background: #fafafa !important;
    }
    .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%;
    }
</style>