vue框架ElementUI表格样式问题

原创已于 2022-08-09 10:52:11 修改 · 746 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2022-07-29 14:10:18 首次发布

这篇博客介绍了如何在Vue.js中定制el-input组件的样式，包括高度、内边距、字体大小、边框等。同时，展示了如何在main.js中引入vuescroll库，设置滚动条样式，实现表格滚动条的平滑滚动效果，包括滚动模式、滚动速度、延迟显示等选项的配置。在子组件中，结合vuescroll指令实现了不同方向的滚动操作。

1、输入框el-input样式修改

原样式：
在这里插入图片描述
增加css样式

.el-input__inner {
  height: 40px;
  padding: 0;
  font-size: 16px;
  border: 1px dashed #409eff;
  background-color: transparent;
  color: #46526b;
}

修改后：
在这里插入图片描述

2、表格滚动条

main.js

import vuescroll from 'vuescroll/dist/vuescroll'

Vue.use(vuescroll)

new Vue({
  router,
  render: h => h(App),
  data() {
    return {
      scrollOps: {
        vuescroll: {
          mode: 'native',//Utils.browser.version.mobile ? 'slide' : 'native'
        },
        rail: {},
        scrollPanel: {
          //scrollingX:false,
          easing: 'easeInQuad'
        },
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: false,
          keepShow: true,
          background: 'rgba(0, 0, 0, 0.4)',
          opacity: 1,
          hoverStyle: false,
          specifyBorderRadius: false,
          minSize: '0.1',
          size: '6px',
          disable: false,
        }
      }
    }
  },
  computed: {
    scrollOpsX() {
      return Object.assign({}, this.scrollOps, {
        scrollPanel: {
          scrollingY: false
        }
      })
    },
    scrollOpsY() {
      return Object.assign({}, this.scrollOps, {
        scrollPanel: {
          scrollingX: false
        }
      })
    },
    scrollOpsSlider() {
      return Object.assign({}, this.scrollOps, {
        vuescroll: {
          mode: 'slide',
        }
      })
    }
  }
}).$mount('#app')

子组件

<template>
  <div class="bottom-box">
    <div class="table-box">
      <vue-scroll :ops="$root.scrollOpsX">
        <div class="table-row">
          <span>项目</span>
          <span v-for="name in nameList">{{ name }}</span>
        </div>
        <div class="table-row">
          <span>称重</span>
          <span v-for="data in bunkerList">{{ data }}</span>
        </div>
        <div class="table-row">
          <span>料位</span>
          <span v-for="data in materialList">{{ data }}</span>
        </div>
        <div class="table-row">
          <span>累计</span>
          <span v-for="data in inventoryList">{{ data }}</span>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>