vue基于vue-seamless-scroll 做无缝滚动的表格（每一行可点击跳转）

最新推荐文章于 2024-04-23 16:29:40 发布

没有烦恼的鲨鱼辣椒

最新推荐文章于 2024-04-23 16:29:40 发布

阅读量990

点赞数

文章标签：大数据 vue.js 前端 javascript elementui

本文链接：https://blog.csdn.net/m0_68647376/article/details/125510995

版权

vue-seamless-scroll 官网与演示chenxuan0000 (gitee.io)

1.安装依赖（内嵌表格用element ui样式）

npm install vue-seamless-scroll --save
npm i element-ui -S

2.外层（使内部滚动）

 <vue-seamless-scroll class="carousel" :data="tableData"  :class-option="classOption">
      <!--此部分放内嵌的表格-->
      </vue-seamless-scroll>

2.1 class="carousel" 命名最外层，控制形状

2.2 :data="tableData" 使循环样式读取不同的变量（没有的话只显示表格不滚动）

2.3 :class-option="classOption" 控制表格滚动速度

3.内层（表格）

<el-table
          :show-header="false"
          :data="tableData" >
          <el-table-column style="width: 80%" show-overflow-tooltip>

            <template slot-scope="scope">
     <a :href="scope.row.url" target="_blank" class="buttonText">>{{ scope.row.title }}</a>
            </template>

          </el-table-column>
          <el-table-column prop="date" style="width: 20%" align="right">
          </el-table-column>
        </el-table>

3.1 :show-header="false" 去除表头达到无缝的效果

3.2 :data="tableData" 使变量传到表格中

3.3 slot-scope="scope" 拿出变量中的元素

3.4 target="_blank" 在新标签页中打开链接

3.4将时间表格与前面的表格拼接，达到后缀显示日期的效果

</el-table-column>
          <el-table-column prop="date" style="width: 20%" align="right">
          </el-table-column>

4.script

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: 'Example01Basic',
  components: {
    vueSeamlessScroll,
  },

  data() {

    return {

      tableData: [
        {
          title: 'title1',
          url: 'http:...',
          date: '2022-06-01',
        }, {
          title: 'title2',
          url: 'http:...',
          date: '2022-06-02',
        }, {
          title: 'title3',
          url: 'http:...',
          date: '2022-06-03',
        },{
          title: 'totle4',
          url: 'http:...',
          date: '2022-06-04',
        },{
          title: 'title5',
          url: 'http:...',
          date: '2022-06-05',
        },

      ],
      classOption: {
        step: 0.3,
      },

    }
  }
}

</script>

5.样式

<style scoped lang="scss">

.carousel {
  height: 300px;
  overflow: hidden;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 80%
}
</style>