vue 완벽 실현 el-table 열 폭 적응

배경
Element UI 는 PC 에서 비교적 유행 하 는 Vue.js UI 프레임 워 크 로 구성 요소 라 이브 러 리 는 대부분 흔히 볼 수 있 는 업무 수 요 를 만족 시 킬 수 있 습 니 다.그러나 가끔 은 맞 춤 형 수요 가 높 아서 구성 요소 자체 가 만족 하지 못 할 수도 있다.최근 에 프로젝트 에서 만 났 어 요.
많은 페이지 에서 표 구성 요소 인 el-table 을 사용 해 야 합 니 다.엘-table-column 에 폭 을 지정 하지 않 으 면 기본적으로 나머지 열 에 평균 적 으로 분 배 됩 니 다.열 수가 많은 경우 엘-table 너비 가 용기 에 한정 되면 셀 의 내용 이 줄 을 바 꿉 니 다.줄 을 바 꾸 지 않 고 내용 을 셀 에서 굴 리 거나 넘 치 거나 잘 립 니 다.
제품 이 원 하 는 효 과 는 내용 이 한 줄 로 표시 되 고 열 간격 이 일치 하 며 표 가 용기 보다 수평 으로 굴 러 가 는 것 입 니 다.el-table-column 은 고정 폭 을 설정 하 는 것 을 지원 하 며 내용 폭 을 예측 할 수 있 는 상황 에서 도 이 수 요 를 만족 시 킬 수 있 습 니 다.문 제 는 열 폭 을 내용 의 너비 에 어떻게 적응 시 키 느 냐 하 는 것 이다.공식 문서 에서 도 이러한 옵션 을 찾 지 못 했 습 니 다.구성 요소 자체 가 지원 하지 않 는 것 같 습 니 다.
기술 안
그래서 내용 의 폭 을 동적 으로 계산 하 는 방안 이 생각 났 다.인터넷 에서 도 이 사고방식 을 제기 한 적 이 있 는데,방법 은 내용 문자 수 에 따라 폭 을 계산 하 는 것 이다.이런 방법 은 몇 가지 한계 가 있다.
내용 은 반드시 텍스트 여야 한다.

서로 다른 문자 의 너비 가 다 르 고 결제 결과 가 정확 하지 않 습 니 다

렌 더 링 전에 데 이 터 를 조작 해 야 하 며 디 결합 에 불리 합 니 다

저 는 다른 사고방식 을 사 용 했 습 니 다.아니면 동적 으로 내용 의 폭 을 계 산 했 습 니까?그러나 실제 렌 더 링 된 DOM 요소 의 너비 에 따라 상기 세 가지 문 제 를 해결 할 수 있 습 니 다.
구체 적 으로 어떻게 할 까요?렌 더 링 된 DOM 요 소 를 보면 el-table 의 헤더 와 내용 은 각각 원생 table 을 사용 하고 colgroup 을 통 해 각 열의 폭 을 설정 합 니 다.여기 서부 터 시작 하면 col 의 name 속성 값 과 대응 하 는 td 의 class 값 이 일치 합 니 다.그러면 대응 하 는 열의 모든 칸 을 옮 겨 다 니 며 너비 가 가장 큰 칸 을 찾 을 수 있 습 니 다.그 내용 의 너비 에 한 개의 거 리 를 더 해서 이 열의 너비 로 할 수 있 습 니 다.

구체 적 실현
내용 의 폭 을 어떻게 계산 합 니까?이것 은 비교적 관건 적 인 절차 다.렌 더 링 된 모든 셀 에'cell 클래스'가 있 습 니 다.white-space:nowrap;overflow: auto;줄 을 바 꿀 수 없 도록 설정 하고 내용 이 초과 되면 스크롤 할 수 있 으 며 display:inline-block 을 설정 합 니 다.실제 내용 의 폭 을 계산 할 수 있 도록 하 다.이렇게 하면 최종 폭 은.cell 요소 의 scrollWidth 속성 을 통 해 얻 을 수 있 습 니 다.

function adjustColumnWidth(table) {
  const colgroup = table.querySelector("colgroup");
  const colDefs = [...colgroup.querySelectorAll("col")];
  colDefs.forEach((col) => {
    const clsName = col.getAttribute("name");
    const cells = [
      ...table.querySelectorAll(`td.${clsName}`),
      ...table.querySelectorAll(`th.${clsName}`),
    ];
    //     "leave-alone"   
    if (cells[0]?.classList?.contains?.("leave-alone")) {
      return;
    }
    const widthList = cells.map((el) => {
      return el.querySelector(".cell")?.scrollWidth || 0;
    });
    const max = Math.max(...widthList);
    const padding = 32;
    table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => {
      el.setAttribute("width", max + padding);
    });
  });
}

중간의 탐색 과정 은 비교적 번 거 롭 지만 최종 코드 의 실현 은 매우 간결 하 다.언제 열 폭 계산 을 촉발 합 니까?자 연 스 럽 게 구성 요소 렌 더 링 이 완료 되면재 활용 을 편리 하 게 하기 위해 서 나 는 Vue 사용자 정의 명령 방식 을 채택 했다.

Vue.directive("fit-columns", {
  update() {},
  bind() {},
  inserted(el) {
    setTimeout(() => {
      adjustColumnWidth(el);
    }, 300);
  },
  componentUpdated(el) {
    el.classList.add("r-table");
    setTimeout(() => {
      adjustColumnWidth(el);
    }, 300);
  },
  unbind() {},
});

더 나 아가 저 는 Vue 플러그 인 을 v-fit-columns 라 고 봉 인 했 습 니 다.npm 창고 에 발표 되 었 고 직접 설치 하면 사용 할 수 있 습 니 다.
설치:

npm install v-fit-columns --save

도입:

import Vue from 'vue';
import Plugin from 'v-fit-columns';
Vue.use(Plugin);

사용:

<el-table v-fit-columns>
  <el-table-column label="No." type="index" class-name="leave-alone"></el-table-column>
  <el-table-column label="Name" prop="name"></el-table-column>
  <el-table-column label="Age" prop="age"></el-table-column>
</el-table>

원본 창 고 는 여기 있 습 니 다:https://github.com/kaysonli/v-fit-columns 아 낌 없 는 가르침 과 스타 를 환영 합 니 다!
총결산
이 방안 은 다소 해 킹 의 의미 가 있 습 니 다.수 요 를 실현 하 는 데 만 급급 하고 다른 부분 에 흠 이 있 을 수 있 습 니 다.예 를 들 어 렌 더 링 이 끝 난 후에 약간 반 짝 입 니 다(폭 을 다시 조정 해 야 하기 때문에 reflow 가 나타 날 수 있 습 니 다).그러나 최종 실현 효 과 를 보면 만 족 스 러 운 편 이다.
이상 은 vue 가 엘-table 열 폭 의 자가 적응 을 완벽 하 게 실현 하 는 상세 한 내용 입 니 다.vue 가 엘-table 열 폭 의 자가 적응 을 실현 하 는 데 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 세 요!