el-table__cell gutter 拿掉
时间: 2024-08-14 09:05:28 浏览: 51
在Element UI的表格组件`el-table`中,`gutter`属性通常用于设置单元格之间的间距。如果你想取消这个间距,即去掉单元格间的空白区域,你可以通过设置`gutter`为`0`或者直接不给`gutter`属性来实现。例如,在HTML模板上修改如下:
```html
<template>
<el-table :gutter="0">
<!-- 表格内容 -->
<el-table-column></el-table-column>
<!-- 其他列... -->
</el-table>
</template>
<script>
export default {
data() {
return {};
}
}
</script>
```
在这个例子中,`:gutter="0"`表示设置了单元格间隔为0,这样就不会有默认的间隙了。如果你希望保持默认样式但不想显示所有行间的间距,也可以只对特定行设置`gutter`。
相关问题
el-table__cell gutter设置为没有边框和背景颜色
你可以添加一个自定义的 CSS 类来覆盖 `el-table__cell--gutter` 的样式:
```css
.no-gutter {
background-color: transparent;
border: none;
}
```
然后,在 `el-table-column` 中添加 `class-name` 属性来应用这个类:
```html
<el-table-column prop="name" label="Name" class-name="no-gutter"></el-table-column>
```
这样就可以将 `el-table__cell--gutter` 的样式覆盖掉,实现没有边框和背景颜色的效果。
<!-- 问卷 --> <template> <div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto"> <el-row :gutter="gutter"> <el-button type="danger" v-if="this.dataitem.CHI_MED_FORM_NO" @click="deletefun" style="position: absolute; left: 20px; top: 10px" > 删除 </el-button> <h3> 中医体质辨识问卷 <el-button size="mini" v-if="this.dataitem.CHI_MED_FORM_NO" round @click="dayinView()" >打印预览</el-button > </h3> </el-row> </template> 一进来页面将页面全部灰置掉,当点击编辑按钮时页面恢复正常
根据你提供的代码,可以使用一个 `isEdit` 变量来控制页面的编辑状态。当 `isEdit` 为 `false` 时,将页面置灰,当点击编辑按钮时,将 `isEdit` 设置为 `true`,页面恢复正常。以下是修改后的代码:
```html
<template>
<div class="maingw" ref="maingwwj" style="height: 100%; overflow: auto">
<el-row :gutter="gutter">
<el-button
type="danger"
v-if="dataitem.CHI_MED_FORM_NO && !isEdit"
@click="deletefun"
style="position: absolute; left: 20px; top: 10px"
>
删除
</el-button>
<h3>
中医体质辨识问卷
<el-button
size="mini"
v-if="dataitem.CHI_MED_FORM_NO && !isEdit"
round
@click="dayinView()"
>打印预览</el-button
>
</h3>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
isEdit: false,
// other data properties
}
},
methods: {
deletefun() {
// delete function implementation
},
dayinView() {
// print preview function implementation
},
// other methods
}
}
</script>
```
然后在编辑按钮的点击事件中,将 `isEdit` 设置为 `true`:
```html
<el-button type="primary" @click="isEdit = true">编辑</el-button>
```
这样,在没有点击编辑按钮时,页面将会处于置灰状态,点击编辑按钮后,页面将恢复正常。
阅读全文