element的展开收起,合并表格
如果两个因为后台接口只能提供两个接口,假数据做法如下
// 什么管理 - 品牌方(采购商什么) <template> <div class="purchaseOrder"> <!--展开行table--> <el-table ref="boxData" v-loading="loading" size="small" :data="boxData" tooltip-effect="dark" style="width: 100%" max-height="600" @expand-change="expandChange" > <el-table-column type="expand"> <template slot-scope="props"> <!-- 子table --> <el-table size="small" :data="props.row.sonData" :cell-style="{ background: '#fff' }" style="width: 100%" border stripe max-height="600" :span-method="objectSpanMethod" > <el-table-column v-for="(item, index) in column2" :key="index" :label="item.title" :prop="item.key" align="center" :fixed="item.fixed" :min-width="item.width ? item.width : 120" > <template slot-scope="scope"> <div v-if="item.key == 'handle_btn2'"> <el-button>操作按钮</el-button> </div> <div v-else>{{ scope.row[item.key] }}</div> </template> </el-table-column> </el-table> </template> </el-table-column> <!-- 总table --> <el-table-column v-for="(item, index) in column1" :key="index" :label="item.title" :prop="item.key" align="center" :fixed="item.fixed" :min-width="item.width ? item.width : 120" > <template slot-scope="scope"> <div v-if="item.key == 'company_name'"> <span class="cBlue pointer" @click="handleSee(scope.row, 'see')">{{ scope.row.company_name }}</span> </div> <div v-else-if="item.key == 'is_usable'"> <span>{{ scope.row.is_usable == 0 ? "禁用" : scope.row.is_usable == 1 ? "启用" : "" }}</span> </div> <div v-else-if="item.key == 'handle_btn'"> <el-button type="text" @click="handleBtn(scope.row, 'edit')" >修改</el-button > <el-button v-if="scope.row.is_usable == 1" type="text" @click="handleIsUsable(scope.row, 0)" >禁用</el-button > <el-button v-if="scope.row.is_usable == 0" type="text" @click="handleIsUsable(scope.row, 1)" >启用</el-button > </div> <div v-else>{{ scope.row[item.key] }}</div> </template> </el-table-column> </el-table> </div> </template> <script> // import paging from "@/components/pages/pagination.vue"; export default { components: { // paging // 分页 }, data() { return { // 加载 loading: true, // 表格数据 boxData: [], sonData: [], tableHeight: 300, // 表格数据 column1: [ { title: "什么编号", key: "order_code", width: 120 }, { title: "什么日期", key: "created_at", width: 90 }, { title: "名称", key: "plan_name", width: 90 }, { title: "操作", key: "handle_btn", width: 90 } ], column2: [ { title: "品牌", key: "brand_name", width: 120 }, { title: "产成品名称", key: "product_name", width: 90 }, { title: "目录", key: "index", width: 90 }, { title: "规格", key: "order_code", width: 90 }, { title: "尺寸", key: "product_name", width: 90 }, { title: "操作", key: "handle_btn2", width: 90 } ] }; }, computed: {}, watch: {}, mounted() {}, created() { // 初始化 表格数据默认渲染 this.handleSeach(); // 实时屏幕高度 let clientHeight = document.documentElement.clientHeight; this.tableHeight = clientHeight > 400 ? clientHeight - 330 : this.tableHeight; }, methods: { // 点击搜索 handleSeach() { // // 页码初始化 // this.paging = { // page: 1, // limit: 10 // }; // this.loading = true; this.handleGetTable(); }, // 获取数据 handleGetTable() { // // 接口获取数据 // Api.customerList(param) // .then(res => { // const { code, data, msg, total } = res.data; // this.total = total; this.loading = false; // 第一层假数据 this.boxData = [ { order_code: "111", plan_name: "什么名称" }, { order_code: "2312222", plan_name: "什么名称" }, { order_code: "32312222", plan_name: "什么名称" } ]; // 给个空数组 this.boxData.forEach((item, index) => { item.sonData = []; }); // this.boxData = data; // 处理数据 // this.handleData(); // }) // .catch(error => { // this.loading = false; // this.boxData = []; // }); }, // 处理数据 expandChange(row, expandedRows) { // console.log(row, expandedRows, "点击展开push给boxData"); // 接口获取里面数据 this.sonData = []; this.sonData = [ { order_code: "111", created_at: "2013-10-31", plan_name: "什么名称", materials: [ { brand_name: "仁和", product_name: "产成品名称1" }, { brand_name: "仁和", product_name: "产成品名称2" } ] }, { order_code: "2312222", created_at: "2021-10-31", plan_name: "什么名称2", materials: [ { brand_name: "仁和2", product_name: "产成品名称21" } ] }, { order_code: "32312222", created_at: "2021-08-31", plan_name: "什么名称3", materials: [ { brand_name: "仁和31", product_name: "产3成品名称31" }, { brand_name: "仁和32", product_name: "产成品名称34" }, { brand_name: "仁和33", product_name: "产成品名称31" } ] } ]; // 先把二纬数组改成一位数组 const handleData = []; if (this.sonData.length) { this.sonData.forEach(row => { // 处理company_users数组的每一个对象 let handleItemData = Object.assign({}, row); if (row.materials.length) { row.materials.forEach((ele, index) => { // 新增行录字段 ele.index = index + 1; // 合为新对象 handleItemData = Object.assign({}, handleItemData, ele); // 需要合并的条数 加一个新属性:合并的个数mergeNum, 第一项为合并个数 其他项-1 if (index == 0) { handleItemData.mergeNum = row.materials.length ? row.materials.length : 0; } else { handleItemData.mergeNum = -1; } // push为一维数组 handleData.push(handleItemData); setTimeout(() => { this.loading = false; }, 200); }); } else { this.loading = false; // 没有值时 也要展示 handleData.push(handleItemData); handleItemData.mergeNum = 1; } }); } else { this.loading = false; } // table的数据才是为处理好的数据 this.sonData = handleData; // return console.log(this.sonData, "处理后的"); // 点开的某项都插入到boxData的某项 this.boxData.forEach((item, index) => { if (item.order_code == row.order_code) { item.sonData = []; this.sonData.forEach((items, indexs) => { if (item.order_code == items.order_code) { item.sonData.push(items); } }); } }); console.log(this.boxData, "处理后的"); }, // table表格 合并 objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 需要合并的 if (columnIndex == 0 || columnIndex == 1) { if (row.mergeNum != -1) { return { rowspan: row.mergeNum, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } }; </script> <style lang="scss"> .purchaseOrder { .el-table { margin-top: 10px; } // 暂时去掉hover .el-table tbody tr:hover > td { background: #fff; } .form-style { } } </style> <style lang="scss" scoped></style>
参考合并https://blog.csdn.net/qq_38060231/article/details/108261350
