table的expand展开——插槽

el-table 表格展开（type="expand"）：

• type 除了展开 expand，还有序号 index、多选 selection

<el-table :data="myTableData">
  
  <el-table-column type="expand" width="30">
    <template #default="props">
      <el-table :data="jzTableData" style="margin: 10px">
        <el-table-column label="xx" prop="jm" />
        <el-table-column label="yy" prop="bzjh" />
        <el-table-column label="xy" prop="hzjh" />
        <el-table-column label="yx" prop="mqjb" />
      </el-table>
    </template>
  </el-table-column>
  
  <el-table-column label="xxyy" align="center" :show-overflow-tooltip="true" width="80">
    <!--  也可以用下述这种方式写在<el-table-column>里，利用本行的某一个值进行别的操作  -->
    <template
        #default="scope"><span>{{ scope.row['jzmc'] }}</span>
    </template>
  </el-table-column>

• 已知要做下述表格的展开：

  <el-table-column label="分类" align="center" :show-overflow-tooltip="true" width="80">
    <template
        #default="scope"><span>{{ scope.row['jzmc'] }}</span>
    </template>
  </el-table-column>
  
  <el-table-column type="expand" width="30">
    <template #default="props">
      <el-table :data="jzTableData" style="margin: 10px">
        <el-table-column label="此分类下的物品信息" prop="jm" />
        <!-- ...... -->
      </el-table>
    </template>
  </el-table-column>
  

数据存放形式为：（分开存）

const myTableData = ref([{ // 放 label="分类"
  "jzmc": "类别1",
}, {
  "jzmc": "类别2"
}, {
  "jzmc": "类别3"
}, {
  "jzmc": "类别4"
}, {
  "jzmc": "类别5"
}])

// 井组下井名与信息
const jzTableData = ref([{ // 放展开处显示各自的jm
  "jz": "类别1",
  "jzmc": [{
    "jm": "11"
    }, {
      "jm": "12"
    }, {
      "jm": "13"
    }]
  }, {
    "jz": "类别2",
    "jzmc": [{
      "jm": "21"
    }, {
      "jm": "22"
    }, {
      "jm": "23"
    }]
  }
])

• 这里可以使用 JavaScript 的 find 方法来找到匹配的井组，然后选择对应的井名，这就需要在 Vue 组件中添加一个方法来处理这个逻辑：

  // el-table里：
  <template #default="props">
    <el-table :data="getJmxx(props.row)" style="margin: 10px">
    	<el-table-column label="井名" prop="jm" />
    </el-table>
  </template>
                
  // 新方法事件
  const getJmxx =(row)=> {
    const findJm = jzTableData.value.find(jz => jz.jz === row.jzmc);
    if (findJm) {
      return findJm.jzmc;
    } else {
      return [];
    }
  }
  

那如果数据仅是：（存一起）

// 井组下井名与信息
const jzTableData = ref([{
  "jzmc": "井组1",
  "jz": [{
    "jm": "井11"
  }, {
    "jm": "井12"
  }, {
    "jm": "井13"
  }]
}, {
  "jzmc": "井组2",
  "jz": [{
    "jm": "井21"
  }, {
    "jm": "井22"
  }, {
    "jm": "井23"
  }]
}, {
  "jzmc": "井3"
}, {
  "jzmc": "井4"
}, {
  "jzmc": "井5"
}
])

• 这种的，然后 template 部分更简单，改为：

  <el-table :data="jzTableData" height='calc(100% - 158px)'
            :style="{width: '100%'}" :border="false" :show-summary="false" size="default"
            :stripe="true" :highlight-current-row="false" :cell-style="{padding: '8px 0 '}">
    <el-table-column type="selection"></el-table-column>
    <el-table-column type="expand" width="30">
      <template #default="props">
  			<el-table :data="props.row.jz" style="margin: 10px">
   				 <el-table-column label="井名" prop="jm" />
        </el-table>
      </template>
    </el-table-column>
    
    <el-table-column label="井组名称" align="center" :show-overflow-tooltip="true" width="80">
      <template
                #default="scope"><span>{{ scope.row['jzmc'] }}</span></template>
    </el-table-column>
    <!-- ...... -->