vuecli+elementui 表格

未处理： 结果：

在 methods里按照既定需求写一个函数 showGroup ，参数v 表示表格显示的数字。比如数字为1表示零点班，2 表示 八点班 ····

showGroup(v){
	let obj={
		1:'零点班',
		2: "八点班",
		3: "四点班",
	}
	return obj[v];
},

在对应的里使用插槽

<el-table-column
   label="班组"
   header-align="center"
 >
   <template slot-scope="scope">
     {{ showgroup(scope.row.shifts) }}
   template>
 el-table-column>

{{ showgroup(scope.row.shifts) }}的shifts为数据的键名

处理前：

处理后：

只需要在css里添加如下代码，根据需求自己调整样式即可

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 10px; /*滚动条的背景区域的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(238, 238, 238, 0.3);
  background-color: #eeeeee; /*滚动条的背景颜色*/
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; /*滚动条的圆角*/
  -webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3);
  background-color: rgb(145, 143, 143); /*滚动条的背景颜色*/
}