element ui的table相关样式修改（待补充）

风兮梧桐

已于 2022-11-16 10:15:35 修改

阅读量1.9k

点赞数 3

分类专栏： VUE 文章标签： ui vue.js elementui

于 2022-08-22 15:44:14 首次发布

本文链接：https://blog.csdn.net/weixin_51263829/article/details/126467231

版权

VUE 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

表格合并，在后端不给合并多少的情况下（有时间补充）

表格中内容复制到检索框后搜索不到内容但是手动输入可以检索

带有选择的table表格（本身有自带的一行选择但是和需求文档不一样改了这种新的）

修改滚动条样式

/* //滚动条的宽度 */
::v-deep .table .el-table__body-wrapper::-webkit-scrollbar {
  border: 0;
  width: 6px;
  height: 6px;
}
/* //滚动条的滑块 */
::v-deep .table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #d3d3d3;
  border-radius: 3px;
}

修改某一列样式

//给需要修改的列单独加上class-name名称
//class-name="el-table-lable-box"
        <el-table-column
          prop="name"
          label="责任人"
          width=70
          class-name="el-table-lable-box">
        </el-table-column>
//在CSS之中单独进行样式修改
::v-deep .el-table-lable-box{
  text-align: center;
}

修改边框样式

::v-deep .el-table td{
  padding: 0;
  border-right: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
::v-deep .el-table th.is-leaf{
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
::v-deep .el-table--border{
  border: 1px solid #e4e4e4;
}

修改鼠标滑动样式（举例为取消滑动后变化）

::v-deep .el-table tbody tr:hover>td{
  background-color: transparent;
}

如何使第一行保持置顶

<el-table
        :data="allOkr"
        :span-method="objectSpanMethod"
        height="68vh"
        border
        style="width: 100%; margin-top: 20px">
//在开头加一个固定高度即可

第一行默认选中，及点击效果

  watch: {
    // 页面第一次变化时将左面第一个作为高亮
    leftList: {
      handler(newData, oldData) {
        console.log('触发监听')
        this.$nextTick(function() {
          this.$refs.leftList.setCurrentRow(this.leftList[0])
        })
      },
      immediate: true
    }
  },

leftList为数组，因为是将表格写在了子组件所以采用监听，要是父组件的话则写在接口返回数据后面，leftList为表格ref值

<el-table
            ref="leftList"
            :data="leftList"
            :show-header="false"
            highlight-current-row
            @current-change="getApprovePeople"
          >
            <template scope="scope">
              <el-table-column
                :class="'role' + scope.$index"
                prop="roleName"
              />
            </template>
          </el-table>

 ::v-deep .el-table__body tr.current-row>td {
    background-color: #409eff;
    color: #ffffff;
  }

上面为对应的CSS和HTML

合并表头（貌似只有第一列生效）

如图所示为效果图

      <el-table
        height="480"
        :data="routerList"
        border
        style="width: 100%"
        :header-cell-style="handerMethod"
      >
        <el-table-column
          prop="meta"
          width="180"
          label="菜单/功能"
        />
        <el-table-column
          prop="title"
          label="菜单/功能"
          width="180"
        />
        <el-table-column
          prop="address"
          label="选择"
        >
          <!-- scope="scope" -->
          <template>
            <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
          </template>
        </el-table-column>
      </el-table>

上面为html,附上方法

    // 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (row[0].level === 1) {
        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[0].colSpan = 0
        row[1].colSpan = 2
        if (columnIndex === 0) {
          return { display: 'none' }
        }
      }
    }

禁止表格拖拽

<el-table-column
          prop="title"
          label="菜单/功能"
          width="180"
          :resizable="false"
        />

如图所示加上 :resizable="false"即可

表格合并，在数据已知合并多少的情况下

    // 列表合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 按照后台返回数据进行合并
      // 仅对表格第一列进行合并
      if (columnIndex === 0) {
        return {
          rowspan: row.merge,
          colspan: 1
        }
      }
    }

row.merge是合并的个数，要是不进行合并的话，每条数据后面的这个应该是0

<el-table
        height="480"
        :data="routerList"
        border
        style="width: 100%"
        :header-cell-style="handerMethod"
        :span-method="objectSpanMethod"
      >

表格合并，在后端不给合并多少的情况下（有时间补充）

表格中内容复制到检索框后搜索不到内容但是手动输入可以检索

el-table会自动过滤空格和换行。原数据中带有连续空格（测__试）,在el-table中显示时，会变成一个空格（测_试），这就导致拿（测_试）检索不到（测__试）

//设置表格样式使其显示空格.
el-table .cell{white-space:pre-wrap}

带有选择的table表格（本身有自带的一行选择但是和需求文档不一样改了这种新的）

<el-radio-group
        v-model="radio"
      >
        <el-table
          height="300"
          :data="inspectionRecordsData"
          border
          :cell-style="{ 'text-align':'center' }"
          :header-cell-style="{'text-align': 'center'}"
        >
          <el-table-column
            prop="meta"
            width="100"
            label="选择"
            :resizable="false"
          >
            <template slot-scope="scope">
              <el-radio
                :label="scope.$index"
                @change="chooseInspectionRecords(scope.row)"
              >{{ '' }}</el-radio>
            </template>
          </el-table-column>
        </el-table>
      </el-radio-group>

在一开始给radio一个空或者1即可。空是默认不选中，1是默认第一个