类目管理表格 - Element UI

"<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 <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 \n\n怎么写indent把子级的往右缩进一些。用中文回答\n内容：可以使用el-table-column组件的show-overflow-tooltip属性来实现子级内容的缩进效果。具体步骤如下：\n\n1. 在需要缩进的列中，添加一个template标签，并设置其slot-scope属性为"scope"，表示使用当前行数据作为作用域。\n2. 在template标签内部，使用span标签包裹需要缩进的内容，并通过v-if指令判断是否为子级，如果是子级，则添加style属性来设置缩进效果。\n3. 在style属性中，设置margin-left属性为合适的缩进值，例如："20px"。\n\n以下是示例代码：\n\nhtml\n<el-table-column label=\"类目名称\" prop=\"categoryName\" width=\"150\">\n <template #default=\"{ row }\">\n <span :style=\"row.isChild ? \'margin-left: 20px\' : \'\"\">\n {{ row.categoryName }}\n </span>\n </template>\n</el-table-column>\n\n\n通过以上代码，可以将子级的内容缩进20px，实现缩进效果。