文字居中
<el-table :data="tableData" class="table-container" :header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}" id="table" ref="multipleTable" tooltip-effect="dark"
:max-height="tableHeight">
纵向滚动条是用了vue-gemini-scrollbar插件(这个插件不好用,这个是我项目本身有的)
npm install vue-gemini-scrollbar --save
// main.js 或其他入口文件
import Vue from 'vue';
import VueGeminiScrollbar from 'vue-gemini-scrollbar';
Vue.use(VueGeminiScrollbar);
使用
<gemini-scrollbar :style="styleTable" horizontal >
<el-table/>
</gemini-scrollbar>
横向滚动条
// /* 使el-table的body部分始终显示横向滚动条 */
/deep/ .el-table__body-wrapper {
overflow-x: auto;
}
/* 对滚动条样式进行自定义(如:始终显示) */
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
-webkit-appearance: button;
width: 28px;
height: 20px;
/* 定义滚动条宽度 */
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 25px;
height: 500px;
width: 50px;
background-color: rgba(193, 193, 193, 0.5);
cursor:pointer
/* 自定义滚动条的颜色 */
}