wl tree table

엘트리테이블

소개

el-tree-table 구성 요소는 vue 및 element-ui를 기반으로 하며 vue-element-admin 구현을 기반으로 몇 가지 새로운 기능을 추가합니다. 그리고 treetable의 비즈니스 구현은 위에서 언급한 오픈 소스 프로젝트에서 비롯될 것임을 선언합니다. 위반 사항이 있는 경우 제때에 저희에게 연락해 주십시오. element-ui의 el-table을 기반으로 작성되었습니다.

확장에는 주로 테두리 표시, 고정 높이, 확인란 표시, 확인란 선택이 부모-자식 연결을 따르는지 여부 및 확인란 비활성화 조건이 포함됩니다.

온라인 액세스 - GitHub

여기에 형제 구성 요소가 있습니다 - 트리 셔틀 상자: 온라인 방문 - GitHub

빨리 시작하세요

npm i @weilan/el-tree-table --save

또는

npm i @weilan/el-tree-table -S

import TreeTable from '@weilan/el-tree-table'

Vue.use(TreeTable)

예

<treeTable :data="tree_table" :columns="columns" checkBox ExpandAll parentChild border :options="{key:'id', children:'Children'}" @treeTableSelect="getTreeTableSelect" />

 <script>

export default {
  name: 'app',
  data(){
    return {
      columns: [
        {
          value: "id",
          text: "值",
        },
        {
          value: "name",
          text: "名字"
        }
      ],
      tree_table:[
        {
          id: "1",
          name: "第1级",
          Children: [
           {
             id: "1-1",
             name: "第1-1级",
             Children: [
               /* {
                  id: "1-1-1",
                  name: "第1-1-1级",
                }, */
                {
                  id: "1-1-2",
                  name: "第1-1-2级",
                  Children: [
                    {
                  id: "1-1-2-1",
                  name: "第1-1-2-1级",
                },
                {
                  id: "1-1-2-2",
                  name: "第1-2-2-2级",
                },
                  ]
                },
             ]
           },
           {
             id: "1-2",
             name: "第1-2级",
             Children: [
                {
                  id: "1-2-1",
                  name: "第1-2-1级",
                },
                {
                  id: "1-2-2",
                  name: "第1-2-2级",
                },
             ]
           },
          ]
        }
      ]
    }
  },
  methods: {
    getTreeTableSelect(val){
      console.log(val);
    }
  },
}
</script>

문서

1. 매개변수: data 설명:树形数据유형: Array, Object 필수: true 보충:对象或数组

2. 매개변수: columns 설명:列属性유형: Array 필수: false 보충: text: 显示在表头的文字,value: 对应data的key。treeTable将显示相应的value, width: 每列的宽度，为一个数字(可选),如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便

3. 매개변수: expandAll 설명:是否展开全部: Boolean 필수 항목: false

4. 매개변수: evalFunc 설명:解析函数유형: Function

5. 매개변수: evalArgs 설명:解析函数参数유형: Array

위의 설명은 (https://github.com/PanJiaChen/vue-element-admin/tree/master/src/comComponents/TreeTable)을 참조하세요.

6. 매개변수: options 설명: nodekey字段及children字段유형: Boolean 필수: false 보충:重要！根据id和children盒子字段来父子关联处理数据，默认{key: "id", children: "children"},如需自定义，请一块修改

7. 매개변수: checkBox 설명:是否显示复选框유형: Boolean 필수: false

8. 매개변수: height 설명:用于固定表头유형: 필수 Number : false

9. 매개변수: border 설명:显示边框유형: Boolean 필수 항목: false 보충:默认为true显示边框

10. 매개변수: disabled 설명:当checkBox为true显示复选框时可用，判断是否禁用字段String 보충:此参数传入内容为：data中表示复选框是否禁用的数据字段例{isDisabled: true, id: 1, children:[]}，则disabled: 'isDisabled'

11. 매개변수: parentChild 설명:当checkBox为true显示复选框时可用，表示是否遵循父子关联유형: Boolean 보충:默认false

12. 이벤트: openChildren 설명:点击图标展开子元素事件콜백: function(row, status), 返回点击行Object, 展开状态Boolean

13. 이벤트: treeTableClick 설명:点击列表行事件콜백: function(row), 返回点击行，注意：重复点击则取消选中并返回{}

14. 이벤트: treeTableSelect 설명:复选框选中事件콜백: function(val), 返回选中数据

15. 슬롯:这是一个自定义列的插槽slot 과 columns属性동시에 존재할 수 있습니다. 열의 데이터 열은 슬롯 사용자 정의 열의 왼쪽에 표시됩니다.