wl tree table

เอล-ทรี-โต๊ะ

การแนะนำ

ส่วนประกอบ el-tree-table ขึ้นอยู่กับ vue และ element-ui และเพิ่มคุณสมบัติใหม่บางอย่างตามการใช้งาน vue-element-admin และขอประกาศ ณ ที่นี้ว่าการดำเนินธุรกิจของ treetable จะมาจากโครงการโอเพ่นซอร์สที่กล่าวมาข้างต้น หากมีการฝ่าฝืนใดๆ โปรดติดต่อเราทันเวลา มันเขียนขึ้นจาก el-table ของ element-ui

ส่วนขยายส่วนใหญ่ประกอบด้วย: การแสดงเส้นขอบ ความสูงคงที่ การแสดงกล่องกาเครื่องหมาย การเลือกกล่องกาเครื่องหมายเป็นไปตามการเชื่อมโยงระหว่างผู้ปกครองและเด็ก และเงื่อนไขการปิดใช้งานกล่องกาเครื่องหมาย

การเข้าถึงออนไลน์ - 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/components/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属性สามารถมีอยู่พร้อมกันได้ คอลัมน์ข้อมูลในคอลัมน์จะแสดงทางด้านซ้ายของคอลัมน์ที่กำหนดเองของช่อง