el-row 设置内容(按钮＞＞)的居中效果

<div class="bottom"> <el-row> <el-button type="primary" round>主要按钮</el-button> </el-row> </div> 把这个按钮放在宽度方向的中间

<template> <div> <el-table :data="tableData" stripe> <el-table-column prop="id" label="序号"></el-table-column> <el-table-column prop="username" label="用户名"></el-table-column> <el-table-column prop="password" label="密码"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column prop="email" label="邮箱"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <el-table-column prop="avatar" label="头像"></el-table-column> <el-table-column prop="role" label="角色"></el-table-column> <el-table-column label="操作"> <template v-slot="scope" > <el-button type="success" plain>编辑</el-button> <el-button type="primary" icon="el-icon-delete"></el-button> </template> </el-table-column> </el-table> </div> </template> 让两个button能在一行 居中对齐

el-form配合el-row

<el-table :data="HeadItemData" style="width: 100%" max-height="400" >> <el-table-column label="字节序号" width="100"> <template #default="{ row }"> <span :style="{ color: row.byteNo > 32 ? 'red' : 'inherit' }"> {{ row.byteNo }} </span> </template> </el-table-column> <el-table-column label="字节数" width="100" prop="len" ></el-table-column> <el-table-column label="数据类型" width="120" prop="dataType"> <template v-slot="scope"> <!-- 数据区不选择数据类型 --> <el-select v-model="scope.row.dataType" placeholder="请选择数据类型" :disabled="scope.row.itemApp === '8'" @change="(val) => handleDataTypeChange(scope.row, val)" > <el-option label="int8" value="1"></el-option> <el-option label="uint8" value="2"></el-option> </el-select> </template ></el-table-column> <el-table-column label="范围" width="210" prop="range" ><template v-slot="scope"> <div class="range-inputs"> <el-input v-model="scope.row.startRange" " placeholder="起始值" clearable style="width: 80px" ></el-input> <span style="margin: 0 5px">-</span> <el-input v-model="scope.row.endRange" " placeholder="结束值" clearable style="width: 80px" ></el-input></div></template ></el-table-column> <el-table-column label="数据项应用类型" width="180" prop="itemApp"> <template v-slot="scope"> <el-select v-model="scope.row.itemApp" " placeholder="请选择数据项应用类型" > <el-option v-for="opt in getOptions(scope.$index)" :key="opt.value" :label="opt.label" :value="opt.value" /> </el-select> </template ></el-table-column> <el-table-column label="校验类型" width="160" prop="verifyType" ><template v-slot="scope"> <el-select v-model="scope.row.verifyType" :disabled="scope.row.itemApp !== '7'" :placeholder=" scope.row.itemApp === '7' ? '请选择校验类型' : '-' " > <el-option label="求和取模" value="0"></el-option> <el-option label="求和取低字节" value="1"></el-option> </el-select> </template ></el-table-column> <el-table-column label="默认值" width="210" prop="default" ><template #header> <div style="display: inline"> 默认值 <el-input v-model="globalDefault" placeholder="请输入默认值" @input="debouncedUpdateDefaults" /> </div> </template> <template #default="scope"> {{ scope.row.default }} </template></el-table-column > <el-table-column label="操作" width="150" fixed="right"> <template v-slot="scope" ><el-button type="text" >上移</el-button ><el-button type="text" >下移</el-button ><el-button type="text" @click="deleteItem(scope.$index)" >删除</el-button ></template > </el-table-column> </el-table>在表格倒数第二行固定添加一个按钮（此行只有行中间有个按钮“+”）