<div style="height: 300px; overflow-y: scroll;"> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> </div>怎么加分割线
时间: 2023-10-06 15:06:39 浏览: 48
你可以在 `div` 标签上添加 `border-top` 样式来实现分割线的效果,例如:
```html
<div style="height: 300px; overflow-y: scroll; border-top: 1px solid #ccc;">
<el-table :data="dialogObj.children">
...
</el-table>
</div>
```
这样就会在 `div` 标签的顶部添加一条灰色的分割线。你可以根据需要调整分割线的颜色和粗细程度。
相关问题
<div class="ui segment"> <div class="ui relaxed divided list" style="height: 500px; overflow: scroll;"> <div class="item" th:each="event : ${events}"> <img class="ui avatar image" style="width: 45px;height: 45px" th:src="${event.data.headerUrl}" > <div class="content"> <div class="ui teal header" th:text="${event.data.nickname}" style="display: inline-block;">小圳</div> <span style="display: inline-block;">回复了你的评论</span> <div class="description" th:text="${event.data.content}">点点关注不迷路</div> <a href="#"><span>博客标题</span></a> </div> <div class="extras" style="float: right;"> <span>2021-10-15</span> <i class="trash icon"></i> </div> </div> </div> </div> 如何设置样式不会因为内容过长而改变
你可以使用CSS的`overflow`属性来控制内容过长时的显示方式。将父元素设置为固定高度,并添加`overflow: scroll;`或`overflow: auto;`,使内容超出父元素高度时,出现滚动条而不改变样式。例如:
```css
.ui.segment {
height: 500px;
overflow: scroll;
}
```
这样,即使内容过长,也能保持相同的样式,不会因为内容溢出而改变。
vue 此表格内数据循环自动滚动 <div class="scroll-container" @mouseover="stopScroll" @mouseout="startScroll" style=" height: 398px; width: 100%; position: relative; overflow: auto; " > <!-- 表格 --> <el-table class="table" height="calc(100% - 0px)" stripe border :header-row-style="{ 'font-size': '14px', padding: '0px' }" :row-style="{ 'font-size': '14px', padding: '0px', height: '30px', }" :cell-style="{ padding: '0px' }" :data="dataList1" highlight-current-row style="width: 100%" > <el-table-column v-for="(val, i) in theadList1" :fixed="i == 0" :key="i" :label="val.name" :min-width="val.w" align="center" > <template slot-scope="scope"> <div v-if=" scope.row.index === rowIndex && scope.column.index === columnIndex && scope.column.label == '可发货数量' " class="inputnum" ></div> <div class="inputnum" v-else>{{ scope.row[val.value] }}</div> </template> </el-table-column> </el-table> </div>
要实现表格内数据的循环自动滚动,你可以使用CSS动画和Vue的生命周期钩子函数来实现。下面是一个示例代码:
```html
<template>
<div class="scroll-container" @mouseover="stopScroll" @mouseout="startScroll">
<el-table ...>
...
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
rowIndex: 0,
columnIndex: 0,
dataList1: [
// 表格数据
],
theadList1: [
// 表头数据
]
};
},
methods: {
stopScroll() {
const container = document.querySelector('.scroll-container');
container.style.animationPlayState = 'paused';
},
startScroll() {
const container = document.querySelector('.scroll-container');
container.style.animationPlayState = 'running';
}
},
mounted() {
const container = document.querySelector('.scroll-container');
const table = document.querySelector('.table');
const rowHeight = 30; // 行高
const animationDuration = 10; // 动画持续时间(秒)
// 计算总高度
const totalHeight = table.scrollHeight;
// 设置动画持续时间
container.style.animationDuration = `${totalHeight / rowHeight / 10}s`;
// 监听动画结束事件,当动画结束时重置行索引
container.addEventListener('animationend', () => {
this.rowIndex = 0;
});
// 每10秒滚动一次
setInterval(() => {
this.rowIndex++;
if (this.rowIndex >= this.dataList1.length) {
this.rowIndex = 0;
}
}, animationDuration * 1000);
}
};
</script>
<style>
.scroll-container {
height: 398px;
width: 100%;
position: relative;
overflow: hidden;
animation: scroll linear infinite;
}
@keyframes scroll {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}
</style>
```
在上述代码中,我们使用了CSS动画来实现滚动效果。在Vue的`mounted`生命周期钩子函数中,我们获取到表格容器和表格元素,并根据行高和表格的总高度计算出动画持续时间。然后,我们使用`setInterval`定时器来每10秒滚动一次,同时更新行索引。当行索引超过数据列表的长度时,将重置行索引为0。最后,我们通过监听动画结束事件,在动画结束时将行索引重置为0,以实现循环滚动的效果。
请注意,上述代码中需要根据你的实际情况修改表格数据和表头数据。希望这可以帮助到你!
阅读全文