wl tree table

طاولة الشجرة

مقدمة

يعتمد مكون el-tree-table على vue و element-ui، ويضيف بعض الميزات الجديدة بناءً على تنفيذ vue-element-admin. ونعلن بموجب هذا أن تنفيذ أعمال Treetable سيأتي من المشاريع مفتوحة المصدر المذكورة أعلاه. إذا كانت هناك أي جريمة، فيرجى الاتصال بنا في الوقت المناسب. تمت كتابته بناءً على الجدول el الخاص بـ element-ui.

يتضمن الامتداد بشكل أساسي: عرض الحدود، والارتفاع الثابت، وعرض خانات الاختيار، وما إذا كان تحديد خانة الاختيار يتبع اقتران الوالدين والطفل، وشروط تعطيل خانة الاختيار.

الوصول عبر الإنترنت - جيثب

يوجد مكون شقيق هنا - صندوق مكوك الشجرة: قم بالزيارة عبر الإنترنت - 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 exploreAllparentChild 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. الفتحة:这是一个自定义列的插槽يمكن أن توجد columns属性slot والأعمدة في نفس الوقت. سيتم عرض أعمدة البيانات في الأعمدة على يسار العمود المخصص للفتحة.