<el-table-column label="操作" align="" class-name="small-padding fixed-width" min-width="4%"> 设置为分散居中
时间: 2023-07-03 11:18:45 浏览: 115
要将表格列的内容设置为分散居中,您可以使用以下步骤:
1. 将 `align` 属性的值设置为 `center`,以使内容在水平方向上居中对齐。
2. 添加以下 CSS 样式来使内容在垂直方向上分散对齐:
```
display: flex;
justify-content: space-between;
align-items: center;
```
3. 将上述样式添加到 `class-name` 属性中,如下所示:
```
<el-table-column label="操作" align="center" class-name="small-padding fixed-width align-center" min-width="4%">
```
这样,就可以将表格列的内容设置为分散居中了。
相关问题
<el-table :data="membersList" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column label="考勤人员" align="center"> <el-table-column label="姓名" prop="memberName" align="center"></el-table-column> <el-table-column label="岗位" prop="post" align="center"></el-table-column> </el-table-column> <el-table-column label="出勤天数" prop="attendanceDays" align="center"></el-table-column> <el-table-column label="岗位系数" prop="postFactor" align="center"></el-table-column> <el-table-column label="调整系数" align="center"> <template slot-scope="scope"> <div> <el-input-number v-model="scope.row.adjustFactor" :precision="2" :step="0.01" :max="0.15" :min="-0.15" size="small" @change="changeFinal(scope.row)" ></el-input-number> </div> </template> </el-table-column> <el-table-column label="最终考勤天数" prop="finalDavs"></el-table-column> </el-table> <div class="membersDays"> <span>合计</span> <span>{{membersDaysJs}}</span>天 </div>
根据您的代码,我发现您的计算属性名为`membersDaysJs`,但是在模板中使用时没有加上括号`()`,因此无法正确调用这个计算属性。您需要将`{{membersDaysJs}}`修改为`{{membersDaysJs()}}`。这应该可以解决computed不生效的问题。
所以,您的模板应该是这样的:
```
<el-table :data="membersList" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
<div class="membersDays">
<span>合计</span>
<span>{{membersDaysJs()}}</span>天
</div>
```
<template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="150"> </el-table-column> <el-table-column label="配送信息"> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column label="地址"> <el-table-column prop="province" label="省份" width="120"> </el-table-column> <el-table-column prop="city" label="市区" width="120"> </el-table-column> <el-table-column prop="address" label="地址" width="300"> </el-table-column> <el-table-column prop="zip" label="邮编" width="120"> </el-table-column> </el-table-column> </el-table-column> </el-table> </template>如何将这个表格大小设置为占满全屏
可以通过给表格外层的元素设置宽度和高度为100%来实现表格占满全屏的效果。
具体操作如下:
1. 在表格外层包裹一个元素,如一个div元素。
2. 给这个div元素设置宽度和高度为100%。
3. 给el-table元素设置宽度为100%。
下面是一个示例代码:
```html
<template>
<div style="width: 100%; height: 100%;">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="150">
</el-table-column>
<el-table-column label="配送信息">
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column label="地址">
<el-table-column prop="province" label="省份" width="120">
</el-table-column>
<el-table-column prop="city" label="市区" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编" width="120">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
```
其中,div元素的宽度和高度设置为100%即可让表格占满全屏。
阅读全文