vue框架ElementUI表格样式问题

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
海康视频是一家致力于提供全面的视频监控解决方案的公司,而VueElementUI是两个在网页应用开发中非常流行的工具。 Vue是一个用于构建用户界面的JavaScript 框架,它采用了组件化的开发思想,可以轻松地构建出复杂的单页应用。Vue具有简洁、灵活、高效的特点,提供了一系列的API来实现数据驱动的视图组件。通过Vue的响应式机制,可以实时更新数据的变化,实现动态渲染页面的效果。 而ElementUI是一个基于Vue的UI组件库,它提供了丰富的组件和样式库,可以帮助开发者快速搭建漂亮、易用的用户界面。ElementUI的组件风格简洁大方,使用方便,适合开发各种类型的网页应用。它提供了各种常用的组件,如按钮、表格、对话框等,也支持响应式布局,适应不同设备上的显示。 海康视频结合了VueElementUI,在其视频监控解决方案中应用了这两个工具。通过Vue的数据驱动和响应式机制,可以实时展示监控摄像头的视频画面,并实现对视频流的控制,如变焦、调整画面等。ElementUI的丰富组件可以用于构建用户友好的监控界面,如视频播放器、告警列表等。同时,ElementUI样式库也可以提供统一的风格和美观的界面显示。 综上所述,海康视频利用VueElementUI,可以更加高效地构建出功能强大、用户友好的视频监控界面,为用户提供安全、方便的监控体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值