Element-UI 2.10 as demand requires a table with a tree structure still meet our needs.
We want the tree structure format follows :( no title, radio button in front of the name of the table data can be modified)
Attach the code :( code only modify the page style, multi-select buttons and other functions to optimize their realization)
<el-table :data="tableData" style="width: 100%;" :show-header="false" row-key="id"> <el-table-column prop="date" label="日期" sortable width="200"> <template slot-scope="scope"> <el-checkbox v-model="checked">{{scope.row.date}}</el-checkbox> </template> </el-table-column> <el-table-column prop="address" label="地址"> <template slot-scope="scope"> <el-input placeholder="请输入计费类型值" v-model="saveContractForm.amountType" class="input-with-select"> <el-select v-model="saveContractForm.amount" slot="prepend" placeholder="请选择" style="width: 150px;"> <el-option label="固定值(元/月)" value="1"></el-option> <el-option label="百分比(%)" value="2"></el-option>select </ el-> </el-input> </template> </el-table-column> </el-table>
TableData: [{ ID: . 3 , DATE: ' DHS appliances ' , name: ' fixed value (RMB / month) ' , address: ' 100 ' , Children: [{ ID: 31 is , DATE: ' DHS electrical sub ' , name : ' fixed value (RMB / month) ' , address: ' 99 ' }, { ID: 32 , DATE: ' DHS electrical sub ' , name: ' fixed value (RMB / month) ' , address: ' 99 ' }] }, { ID: . 4 , DATE: ' DHS appliances ' , name: ' fixed value (RMB / month) ' , address: ' 100 ' , Children: [{ ID: 31 is , DATE: ' DHS electrical sub ' , name: ' fixed value (RMB / month) ' , address: ' 99 ' }, { ID: 32 , DATE: ' DHS electrical sub ' , name: ' fixed value (RMB / month) ' , address: ' 99 ' }] }],
<style> .el-select .el-input { width: 150px; } .input-with-select .el-input-group__prepend { background-color: #fff; } </style>