<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>怎么加分割线

你可以在 `div` 标签中加上 `border-top: 1px solid #ccc;` 的 CSS 样式，来添加一条分割线。示例如下：

<div style="height: 300px; overflow-y: scroll; border-top: 1px solid #ccc;">     
  <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>

这样就会在 `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;`，使内容超出父元素高度时，出现滚动条而不改变样式。例如：

.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的生命周期钩子函数来实现。下面是一个示例代码：

<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，以实现循环滚动的效果。

请注意，上述代码中需要根据你的实际情况修改表格数据和表头数据。希望这可以帮助到你！