vue框架ElementUI表格样式问题

超心塞的阿秋

已于 2022-08-09 10:52:11 修改

阅读量718

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

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

本文链接：https://blog.youkuaiyun.com/qq_36697072/article/details/126054558

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>