Element UI 表格树结构子级缩进实现 - 如何在 El-table 中实现子级缩进
"<el-table ref="dataTableRef" v-loading="loading" :data="CategoryList" row-key="categoryId" highlight-current-row\n :cell-style="{ textAlign: 'center' }" :header-cell-style="{\n 'text-align': 'center',\n 'background-color': '#f8f8f9',\n }">\n <el-table-column label="类目id" prop="categoryId" width="220" />\n <el-table-column label="类目名称" prop="categoryName" width="150" />\n <el-table-column label="父级类目id" prop="parentCategoryId" width="180" />\n\n\n <el-table-column label="说明" prop="categoryDesp" width="200" />\n <el-table-column label="排序" prop="orderNum" width="200">\n <template #default="{ row }">\n <el-input-number v-model="row.orderNum" :min="1" :max="99" @change="handleChange(row)" />\n \n \n <el-table-column label="创建时间" prop="createTime" min-width="180" />\n\n\n\n这个树,怎么把子级的往右缩进一些\n\n <el-table-column label="操作人" prop="userId" width="200" />\n ""\n <el-table-column label="操作" fixed="right" width="106">\n <template #default="scope">\n <el-button type="primary" size="small" link @click="openDialog(scope.row)">修改\n \n <el-button type="primary" size="small" link @click="handleDelete(scope.row.categoryId)">\n 删除\n \n ""\n \n \n "To indent the child levels in the tree, you can use the slot-scope attribute in the <el-table-column> component to customize the content of the column. Here's an example of how you can achieve this:\n\nhtml\n<el-table-column label=\"类目名称\" prop=\"categoryName\" width=\"150\">\n <template #default=\"{ row, $index }\">\n <div :style=\"{ paddingLeft: `${(row.level - 1) * 20}px` }\">\n {{ row.categoryName }}\n </div>\n </template>\n</el-table-column>\n\n\nIn this example, row.level represents the level of the current row in the tree structure. By multiplying it with the desired indentation value (in this case, 20 pixels), you can dynamically set the left padding of the cell content based on its level.\n\nMake sure to adjust the indentation value (20px in this example) according to your preference.\n\nNote: The row.level property should be added to the data source for the CategoryList array.
原文地址: https://www.cveoy.top/t/topic/qgW0 著作权归作者所有。请勿转载和采集!