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>