el-table内部网格线
时间: 2023-11-07 12:03:45 浏览: 143
el-table内部网格线可以通过以下样式进行调整:
1. 去除表格线: 使用`.my_table >>> .el-table__row>td`选择器,将`border`属性设置为`none`,即可去除表格线。
2. 去除下边框: 使用`.my_table >>> .el-table::before`选择器,将`height`属性设置为`0`,即可去除下边框。
3. 去除上边框: 使用`.my_table >>> .el-table th.is-leaf`选择器,将`border`属性设置为`none`,即可去除上边框。
相关问题
el-table 套el-table 内部table方法循环
el-table套el-table内部table方法的循环,可以通过在el-table-column中嵌套el-table来实现。具体方法如下所示:
```
<el-table-column>
<template slot-scope="scope">
<el-table :data="scope.row.内部table数据源">
<el-table-column label="列名1" prop="字段1"></el-table-column>
<el-table-column label="列名2" prop="字段2"></el-table-column>
<!-- 其他列 -->
</el-table>
</template>
</el-table-column>
```
在这个例子中,我们首先在外部的el-table-column中使用了slot-scope="scope"来获取到当前行的数据。然后在内部的el-table中,我们使用了:数据="scope.row.内部table数据源"来指定内部表格的数据源。在内部的el-table-column中,我们可以根据需要添加具体的列。
el-table嵌套el-table,内部table循环图片
el-table嵌套el-table,内部table循环图片的方法如下:
1. 首先,你需要在外部的el-table中定义一个列(el-table-column),并设置宽度和对齐方式。例如,你可以使用以下代码:
```html
<el-table-column width="700" label="非结构化数据总量" align="center"></el-table-column>
```
2. 然后,在内部的el-table中定义一个列(el-table-column),并设置宽度和对齐方式。例如,你可以使用以下代码:
```html
<el-table-column label="结构化数据总量" align="center" width="356"></el-table-column>
```
3. 接下来,你需要在内部的el-table中使用作用域插槽(scoped slot)来循环显示图片。你可以使用以下代码:
```html
<el-table-column label="图片" align="center">
<template slot-scope="scope">
<img v-for="image in scope.row.images" :src="image.url" :key="image.id" width="100" height="100">
</template>
</el-table-column>
```
在这个例子中,我们假设每行数据都有一个名为images的数组,其中包含多个图片对象。我们使用v-for指令来循环遍历这个数组,并使用:src绑定每个图片的URL,:key绑定每个图片的唯一ID。
这样,你就可以实现el-table嵌套el-table,并在内部table中循环显示图片了。