表格修改

584911253@qq.com

2023-03-02 8bb00665765e8348aeb3a6e799069287e503e1ab

 src/views/AuthorizationManagement/userRoleAuthorization.vue

@@ -1,6 +1,6 @@
<template>
  <div class="menuSettings_box userRoleAuthorization userRoleAuthorization1">
    <div class="menuSettings_tree subpage_Div userRoleAuthorization_left">
    <div class="menuSettings_left_tree subpage_Div userRoleAuthorization_left content-border">
      <My-bread
        :list="[
          `${$t('operatManage.operatManage')}`,
@@ -32,6 +32,7 @@
        menuSettings_tree
        subpage_Div
        userRoleAuthorization_mid userRoleAuthorization_left1
        content-border
      "
    >
      <div
@@ -51,8 +52,9 @@
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        @row-click="singleElection"
        height="calc(100% - 124px)"
        height="calc(100% - 80px)"
      >
        <el-table-column align="center" width="55">
          <template slot-scope="scope">
@@ -77,7 +79,7 @@
        >
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 20px" class="pagination_box">
      <div style="text-align: center; margin-top: 10px" class="pagination_box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
@@ -91,7 +93,7 @@
      </div>
    </div>
    <!-- <div class="userRoleAuthorization_resize1" title="收缩侧边栏">⋮</div> -->
    <div class="menuSettings_tree subpage_Div userRoleAuthorization_mid1">
    <div class="menuSettings_tree subpage_Div userRoleAuthorization_mid1 content-border">
      <div
        style="
          font-size: 14px;
@@ -99,7 +101,7 @@
          line-height: 1;
          cursor: text;
          position: relative;
          top: 5px;
          top: 0px;
          margin-left: 10px;
          display: flex;
          align-items: center;
@@ -109,7 +111,7 @@
        <span>
          {{ $t("operatManage.UserRoleAuthorizationObj.userTable") }}</span
        >
        <div class="btn" style="margin-left: auto">
        <div class="btn" style="margin-left: auto;">
          <el-button
            v-if="menuStatus.insert"
            type="success"
@@ -135,7 +137,8 @@
      <el-table
        :data="usertableData"
        style="width: 100%"
         height="calc(100% - 124px)"
        border
         height="calc(100% - 80px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
@@ -151,7 +154,7 @@
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px; text-align: center" class="pagination_box">
      <div style="margin-top: 10px; text-align: center" class="pagination_box">
        <el-pagination
          @size-change="userhandleSizeChange"
          @current-change="userhandleCurrentChange"
@@ -320,7 +323,7 @@
        "userRoleAuthorization_resize1"
      );
      let left = document.getElementsByClassName("userRoleAuthorization_left1");
       let left1 = document.getElementsByClassName("userRoleAuthorization_left");
      let left1 = document.getElementsByClassName("userRoleAuthorization_left");
      let mid = document.getElementsByClassName("userRoleAuthorization_mid1");
      let box = document.getElementsByClassName("userRoleAuthorization1");
      console.log(resize)
@@ -336,12 +339,12 @@
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
           

            let endX = e.clientX;
             console.log(endX ,startX)
            let moveLen = resize[i].left  + (endX - startX) - left1[i].offsetWidth ; // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
            let maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
        

            if (moveLen < 205) moveLen = 205; // 左边区域的最小宽度为32px
            if (moveLen > maxT - 300) moveLen = maxT - 300; //右边区域最小宽度为150px

@@ -584,17 +587,31 @@
<style lang="less" scoped>
//@import url(); 引入公共css类
.menuSettings_box {
  height: 98%;
  //height: 98%;
  height: 100%;
  width: 98%;
  padding: 1%;
  padding: 0 1%;
// position: relative;
  display: flex;
  justify-content: space-between;

  .menuSettings_tree {
    width: 33%;
  .menuSettings_left_tree{
    width: 20%;
    height: 98%;
    margin-top: 10px;
    position: relative;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .menuSettings_tree {
    width: 39%;
    height: 98%;
    margin-top: 10px;
    //height: 100%;
    position: relative;
    //padding: 1%;
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
@@ -620,6 +637,6 @@
.el-table /deep/ th,
.el-table /deep/ tr {
  background-color: transparent !important;
} 
}
</style>