template el-scrollbar div class=scrollbar-flex-content p v-for=item in 50 key=item class=scrollbar-demo-item item p div el-scrollbartemplatestyle scopedscrollbar-flex-conten

这个模板是一个使用 Element UI 的 el-scrollbar 组件实现的带有滚动条的内容列表。具体使用方法如下：

1. 在需要使用 el-scrollbar 的组件中，引入 el-scrollbar 组件和样式文件。

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
</template>

<script>
import { ElScrollbar } from 'element-ui';

export default {
  components: {
    ElScrollbar,
  },
};
</script>

<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>

2. 在模板中使用 el-scrollbar 组件包裹需要滚动的内容，这里使用一个包裹了 50 个 p 标签的 div 元素作为示例。每个 p 标签都有一个唯一的 key 属性，用于 Vue 的循环渲染。

3. 在样式中，.scrollbar-flex-content 类设置为 display: flex，使其内部元素能够水平排列。.scrollbar-demo-item 类设置了每个 p 标签的样式，包括宽度、高度、边距、背景色、字体颜色等。

4. 在需要使用 el-scrollbar 的组件中，可以根据需求调整 el-scrollbar 组件的属性和样式，以适应不同的滚动需求