CSS--滚动条样式，鼠标点击小手，文字省略显示

1.鼠标悬停（变小手）

/*鼠标悬停变小手（全局APP.vue）*/
 * {
  cursor: pointer;
}  

2.滚动条样式（全局APP.vue）

::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
/* 滑块部分 */
::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(133, 130, 134);
  cursor: pointer;
}
/* 轨道部分 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 5px;
  cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* ::-webkit-scrollbar {
  display: none;
} */

3.局部滚动条样式

.div::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}
/* 滑块部分 */
.div::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgb(133, 130, 134);
  cursor: pointer;
}
/* 轨道部分 */
.div::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ededed;
  border-radius: 5px;
  cursor: pointer;
}
/*滚动条超出部分隐藏 */
/* .div::-webkit-scrollbar {
  display: none;
} */

4.文字超出省略，鼠标hover显示

	  .title {
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .title:hover {
        text-overflow: inherit;
        overflow: visible;
        white-space: nowrap;
      }
      /*超出两行省略*/
      /*.title {
         overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        -ms-text-overflow: ellipsis;
        text-overflow: ellipsis;
      }*/

5.element的表格控制字数使用气泡

<el-table-column label="退回意见" prop="returnSuggestion" align="center" width="200">
          <template #default="scope">
              <el-popover
                v-if="scope.row.title.length > 20"
                placement="top"
                width="300"
                trigger="hover"
                :content="scope.row.title"
              >
                <p slot="reference">
                  {{ scope.row.title.slice(0, 20) + "..." }}
                </p>
              </el-popover>
              <p v-else>{{ scope.row.title }}</p>
            </template>
        </el-table-column>

6.element表格表头添加自定义

      <el-table-column
        label="欠费金额"
        prop="amountOwed"
        align="center"
      >
        <template v-slot:header="{ column, $index }">
          欠费金额
          <el-tooltip
            class="item"
            effect="dark"
            content="欠费金额=账户余额-已出的预缴账单-未结算的实际应收账单"
            placement="right-start"
          >
            <i
              style="color:#f59a24;cursor: pointer"
              class="el-icon-warning"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>