Mixer rendering

◆ Core principles

    1. Table how to nest a table

, which is props. Row. childList
<el-table-column type="expand">
  <template slot-scope="props">
    <el-table :data="props.row.childList"/>
Copy the code
    1. Check Boxes How do you nest check boxes

Do not use the table with type=”selection”, all check boxes write their own

<el-table-column width="50" align="center"> <! -- Select all button in the header, <div slot="header" slot-scope="scope"> <el-checkbox V-model ="globelCheckedAll" @change="clickCheckAll(scope)" :indeterminate="isIndeterminateAll" ></el-checkbox> </div> <! -- The selection box for each item, <template slot-scope="scope"> <el-checkbox v-model="scope.row.isChecked" :indeterminate="scope.row.isIndeterminate" @change="handleSelectionChange(scope.row)" ></el-checkbox> </template> </el-table-column> <el-table-column align="center" type="expand"> <template slot-scope="props"> <! "> < span style=" max-width: 100%; clear: both; Class ="child-table" row-key="guid" > <el-table-column label=" width="120" align="center"> <! <template slot-scope="scope"> <el-checkbox v-model=" scope.row.ischecked" @change="clickCheckItemFn(props.row, scope.row)" ></el-checkbox> </template> </el-table-column> ... </el-table> </template> </el-table-column> ... data() { return { isIndeterminateAll: false, globelCheckedAll: false, tableData: [] } }, mounted() { this.initData() }, methods: { initData() { for (let index = 0; index < 11; index++) { this.tableData.push({ id: index + 1, isChecked: false, isIndeterminate: false, childList: [ { lastTime: '2021/3/2 12:00', isChecked: false }, { lastTime: '2021/3/2 12:00', isChecked: false } ] }) } }, }Copy the code

Pieces of source code

<template> <page-box title="test"> <div slot="box" class="issued-manage"> <! <el-table border :data="tableData" class=" sold-list "height="100%" style="width: 100%" > <el-table-column width="50" align="center"> <div slot="header" slot-scope="scope"> <el-checkbox v-model="globelCheckedAll" @change="clickCheckAll(scope)" :indeterminate="isIndeterminateAll" ></el-checkbox> </div> <template slot-scope="scope"> <el-checkbox v-model="scope.row.isChecked" :indeterminate="scope.row.isIndeterminate" @change="handleSelectionChange(scope.row)" ></el-checkbox> </template> </el-table-column> <el-table-column align="center" type="expand"> <template slot-scope="props"> <! "> < span style=" max-width: 100%; clear: both; 100%" class="child-table" row-key=" guID "> <el-table-column label=" select "width="120" align="center"> <template slot-scope="scope"> <el-checkbox v-model="scope.row.isChecked" @change="clickCheckItemFn(props.row, Scope. row)" ></el-checkbox> </template> </el-table-column> <el-table-column prop="auto" label=" license "/> <el-table-column Prop ="status" label=" Delivery status" /> <el-table-column prop="lastTime" label=" last delivery time "/> <el-table-column label=" Operation "> <template  slot-scope="scope"> <div class="operat-box"> <i class="icon icon-del" @click=" clickDelFn( props.row, props.$index, scope.row, Scope.$index) "> Delete </ I > </div> </template> </el-table-column> </el-table> </el-table> </template> </el-table-column> <el-table-column label=" prop=" ID "width="60"></el-table-column> <el-table-column label=" profile" width="60">< template slot-scope="scope"> <img :src="scope.row.image" class="avator-img" alt="" srcset="" /> </template> </el-table-column> <el-table-column label=" name" prop="name"></el-table-column> <el-table-column label=" contact information "prop="tel"></el-table-column> <el-table-column label=" Prop ="unit"></el-table-column> <el-table-column label=" Staff type" Prop ="type"></el-table-column> <el-table-column label=" input time" prop="time"></el-table-column> </el-table> </div> </page-box> </template> <script> export default { data() { return { isIndeterminateAll: false, globelCheckedAll: false, tableData: [] } }, mounted() { this.initData() }, methods: { initData() { for (let index = 0; index < 11; Index++) {this.tabledata.push ({id: index+ 1, name: 'C ', tel: '18111778899', unit:' A- department C- department C1', image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2974063438, & FM = 26 & gp = 0. 76061761 JPG', type: 'employees' time: '2021/2/27007 ', isChecked: false, isIndeterminate: false, childList: [{guID: 'xx97', auto: 'xx97', status: {guID: 'xx98', auto: 'xx98', status: 'not issued ', lastTime:' 2021/3/212:00 ', isChecked: false}, {GUID: 'xx98', auto: 'xx98', status: 'not issued ', lastTime: '2021/3/2 12:00', isChecked: false } ] }) } }, / / manual changes all the state of the button updateCheckedAllBtnStatus (value) {/ / check if it is chose the if (value) {/ / check whether all data manually checked let isAllChecked = this.tableData.every(v => v.isChecked) if (isAllChecked) { this.globelCheckedAll = true this.isIndeterminateAll = false } else {this.isIndeterminateAll = true}} else {// Check whether all data is unchecked let isAllCancelChecked = this.tableData.every(v => v.isChecked == false) if (isAllCancelChecked) { this.globelCheckedAll = false this.isIndeterminateAll = false } else { This.isindeterminateall = true}}}, // Select all clickCheckAll(item) {// The console item is invalid, just for esLint verification, Log (item) this.tableData = this.tabledata.map (val => {val.ischecked = val this.globelCheckedAll val.childList = val.childList.map(i => { i.isChecked = this.globelCheckedAll return i }) return val }) this.updateCheckedAllBtnStatus(this.globelCheckedAll) }, HandleSelectionChange (val) {val.childList = val.childlist.map (I => {i.isecked = val.ischecked return I}) Val. IsIndeterminate = false enclosing updateCheckedAllBtnStatus (val. IsChecked)}, / / each item selection event - radio clickCheckItemFn (row, If (item.ischecked) {this.isindeterminateAll = true // Check if all data is manually checked let isAllChecked = row.childList.every(v => v.isChecked) if (isAllChecked) { row.isChecked = true row.isIndeterminate = false } else { Row.isindeterminate = true}} else {// Check if all data is unchecked let isAllCancelChecked = row.childlist. Every (v => V.i false) if (isAllCancelChecked) { row.isChecked = false row.isIndeterminate = false this.isIndeterminateAll = false } Else {row.isIndeterminate = true}}}, // Delete clickDelFn(row, index, item, itemIndex) {console.log(row, index, item, itemIndex) } } } </script> <style lang="scss" scoped> img{ width:50px; height: 50px; } </style>Copy the code