element ui tree table 다운로드 - element ui tree table 소스 코드 다운로드

element ui tree table

기타 카테고리

1.0

다운로드

요소 UI 트리 테이블

트리 구조를 지원하도록 ElementUI 테이블 구성 요소 확장

설치하다

npm install element-ui-tree-table -S

용법

프로젝트는 Element-UI에 따라 다르므로 먼저 소개해야 합니다.

소개하다

 import TreeTableComponent from 'element-ui-tree-table'
import 'element-ui-tree-table/dist/index.css'
Vue . use ( TreeTableComponent , {
    prefix : 'i' // 可选
} )

사용

테스트 데이터

< template >
  < div id = " app " >
    < i-tree-table height = " 600px " id-key = " rowKey " :columns = " columns "
      @select = " onSelect "
      @trigger = " onTrigger "
      :data = " data " border >
      < el-table-column label = "负责人" prop = " leader " />
      < el-table-column label = "创建时间" prop = " createTime " />
      < el-table-column label = "经验要求" prop = " expr " >
        < template slot-scope="scope">
          < span v-if = " scope.row.expr " >{{scope.row.expr}}</ span >
          < span v-else >————</ span >
        </ template >
      </ el-table-column >
      < el-table-column label = "发布天数" prop = " date " />
    </ i-tree-table >
    < br />
    < el-button type = " primary " size = " small " @click = " add " >增加一行</ el-button >
  </ div >
</ template >

< script >
import data from ' ./components/data '
import TreeTable from ' ./components/tree-table '
export default {
  name : ' App ' ,
  components : {
    TreeTable
  },
  data () {
    return {
      data,
      columns : [{
        type : ' index ' ,
        align : ' center '
      }, {
        type : ' selection ' ,
        align : ' center '
      }, {
        label : '职位名称' ,
        prop : ' name '
      }],
      id : 1000
    }
  },
  methods : {
    add () {
      this . data . push ({
        rowKey : this . id ++ ,
        name : '新增行' ,
        leader : '管理员' ,
        $expanded : true ,
        createTime : ' 2019-07-24 ' ,
        expr : ' ' ,
        date : ' 1天'
      })
    },
    onSelect ( selection ) {
      console . log (selection)
    },
    onTrigger ( row , expanded ) {
      /**
       * 在这里可以保留折叠状态
       * 也可以设置reserve-expaned属性为true保留状态 但是你不能够设置默认值，设置了默认值的行将不受控，因为* 组件肯定是选择用户传入$expaned属性为准
       * 所以推荐的做法是监听trigger事件
       */
      row . $expanded = expanded
    }
  }
}
</ script >

구성 항목

재산	유형	설명하다	기본값
데이터	정렬	데이터 소스에는 행을 고유하게 식별하기 위해 기본적으로 rowKey 속성을 지정해야 합니다.	-
ID 키	끈	데이터 소스 고유 인덱스	행 키
기둥	정렬	인덱스 열 구성, 열 선택 및 열 확장	-
상	끈	확장 아이콘	엘-아이콘-캐럿-오른쪽
트리거 클래스	끈	버튼 클래스 확장	-
예비 확장	부울	확장된 상태를 유지할지 여부입니다. 이 속성이 true이면 기본 확장을 설정하지 않는 것이 좋습니다. 트리거를 수신하여 확장된 상태를 유지할 수 있습니다.	-
원본 테이블 구성 항목	-	element-ui 문서를 참조하세요.	-

열 구성 항목

알아채다:

유형이 index가 아니고 선택 항목인 첫 번째 요소는 열을 배치하기 위한 확장 버튼으로 처리됩니다.
확장된 열은 하나만 있을 수 있으며 추가 열은 무시됩니다.

열 구성 확장

재산	유형	설명하다	선택적 값
상표	끈	표시된 제목	-
소품	끈	열 내용에 해당하는 필드 이름, 속성 속성을 사용할 수도 있습니다.	-
맞추다	끈	조정	왼쪽/가운데/오른쪽
너비	끈	해당 열 너비	-
결정된	문자열, 부울	열이 왼쪽 또는 오른쪽에 고정되었는지 여부에 관계없이 true는 왼쪽에 고정됨을 의미합니다.
렌더 헤더	함수(h, {열, $index })	열 제목 레이블 영역 렌더링에 사용되는 기능
클래스 이름	끈	열 클래스 이름
라벨-클래스-이름	끈	현재 열 헤더의 사용자 정의 클래스 이름
쇼-오버플로-툴팁	부울	콘텐츠가 너무 길어서 숨겨져 있는 경우 도구 설명 표시
최소 너비	끈	해당 열의 최소 너비입니다. 너비와의 차이점은 너비가 고정되어 있고 min-width가 min-width가 설정된 열에 나머지 너비를 비례적으로 할당한다는 것입니다.
헤더 정렬	끈	헤더 정렬 이 항목을 설정하지 않으면 테이블 정렬이 사용됩니다.	왼쪽/가운데/오른쪽
크기 조정 가능	부울	해당 열의 너비를 드래그하여 변경할 수 있는지 여부 (border 속성을 true로 설정해야 함)

일반 컬럼 구성

재산	유형	설명하다	선택적 값
유형	끈	해당 컬럼 유형에 대해 선택이 설정된 경우 다중 선택 상자가 표시되고, 인덱스가 설정된 경우 해당 행의 인덱스가 표시됩니다.	선택/색인
상표	끈	표시된 제목	-
소품	끈	열 내용에 해당하는 필드 이름, 속성 속성을 사용할 수도 있습니다.	-
맞추다	끈	조정	왼쪽/가운데/오른쪽
너비	끈	해당 열 너비	-
결정된	문자열, 부울	열이 왼쪽 또는 오른쪽에 고정되었는지 여부에 관계없이 true는 왼쪽에 고정됨을 의미합니다.
렌더 헤더	함수(h, {열, $index })	열 제목 레이블 영역 렌더링에 사용되는 기능
클래스 이름	끈	열 클래스 이름
라벨-클래스-이름	끈	현재 열 헤더의 사용자 정의 클래스 이름
선택 가능	함수(행, 인덱스)	유형=선택인 열에만 유효합니다. 유형은 함수입니다. 함수의 반환 값은 이 행의 CheckBox를 확인할 수 있는지 여부를 결정하는 데 사용됩니다.
쇼-오버플로-툴팁	부울	콘텐츠가 너무 길어서 숨겨져 있는 경우 도구 설명 표시
최소 너비	끈	해당 열의 최소 너비입니다. 너비와의 차이점은 너비가 고정되어 있고 min-width가 min-width가 설정된 열에 나머지 너비를 비례적으로 할당한다는 것입니다.
헤더 정렬	끈	헤더 정렬 이 항목을 설정하지 않으면 테이블 정렬이 사용됩니다.	왼쪽/가운데/오른쪽
크기 조정 가능	부울	해당 열의 너비를 드래그하여 변경할 수 있는지 여부 (border 속성을 true로 설정해야 함)

이벤트

이벤트 이름	효과	매개변수
방아쇠	확장된 상태가 변경될 때 트리거되며 일반적으로 상태를 저장하는 데 사용됩니다.	(데이터 데이터 소스 노드, 확장된 상태)