br-dionysus 1.7.1 → 1.7.2-beta.2

package/README.md

@@ -992,7 +992,49 @@ const options: Option[] = [{
 
 <template>
   <div class="g-box">
+    <h3>展开列</h3>
     <p>{{ tableConfig }}</p>
+    <MTable
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      expandProp="sn"
+    >
+      <MTableColumn
+        type="expand"
+        width="1"
+      >
+        <template #default>
+          <h1>测试</h1>
+        </template>
+      </MTableColumn>
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTable>
+    <h3>树状表格</h3>
     <MTable
       class="style.box"
       :data="tableData"
@@ -1004,11 +1046,6 @@ const options: Option[] = [{
       rowKey="id"
       tableConfigKey="tableConfigKey"
     >
-      <!--<MTableColumn type="expand">-->
-      <!--  <template #default>-->
-      <!--    <h1>测试</h1>-->
-      <!--  </template>-->
-      <!--</MTableColumn>-->
       <MTableColumn
         v-for="item in tableTitle"
         :key="item.prop"
@@ -1024,7 +1061,6 @@ const options: Option[] = [{
         showOverflowTooltip
       >
       </MTableColumn>
-      <!--<template #default="scope">{{ scope.row[item.prop] }}</template>-->
     </MTable>
   </div>
 </template>
@@ -1033,8 +1069,17 @@ const options: Option[] = [{
 import { ref } from 'vue'
 import { useTableConfig } from 'packages/index'
 
+const test = (data: any) => {
+  console.log('data', data)
+}
+
 const tableData = ref<any[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('MTableDemo', [{
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left'
+}, {
   label: 'Date',
   prop: 'date',
   minWidth: 200
@@ -1048,58 +1093,59 @@ const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('
   minWidth: 200
 }], tableData)
 
-tableData.value = [
-  {
-    id: 1,
-    date: '2016-05-03',
-    name: 'Tom1',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Home'
-  },
-  {
-    id: 2,
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  children: [{
+    id: 21,
+    sn: 1,
     date: '2016-05-02',
-    name: 'Tom2',
+    name: 'Tom21',
     address: 'No. 189, Grove St, Los Angeles',
     tag: 'Office',
-    children: [{
-      id: 21,
-      date: '2016-05-02',
-      name: 'Tom21',
-      address: 'No. 189, Grove St, Los Angeles',
-      tag: 'Office',
-    }, {
-      id: 22,
-      date: '2016-05-02',
-      name: 'Tom22',
-      address: 'No. 189, Grove St, Los Angeles',
-      tag: 'Office',
-    }]
-  },
-  {
-    id: 3,
-    date: '2016-05-04',
-    name: 'Tom3',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Home'
-  },
-  {
-    id: 4,
-    date: '2016-05-01',
-    name: 'Tom4',
+  }, {
+    id: 22,
+    sn: 2,
+    date: '2016-05-02',
+    name: 'Tom22',
     address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }
-]
-
-const pasteData = (obj: any, data: any) => {
-  tableData.value = data
-}
+    tag: 'Office',
+  }]
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}]
 </script>
 
 <style lang="scss" scoped>
 .g-box {
-  max-width: 1200px;
+  max-width: 1000px;
 }
 </style>
 
@@ -3188,7 +3234,49 @@ const options: Option[] = [{
 
 <template>
   <div class="g-box">
+    <h3>展开列</h3>
     <p>{{ tableConfig }}</p>
+    <MTable
+      class="style.box"
+      :data="tableData"
+      border
+      @headerDragend="headerDragend"
+      :filtersValue="filtersValue"
+      scrollbarAlwaysOn
+      v-model:tableConfig="tableConfig"
+      rowKey="id"
+      tableConfigKey="tableConfigKey"
+      expandProp="sn"
+    >
+      <MTableColumn
+        type="expand"
+        width="1"
+      >
+        <template #default>
+          <h1>测试</h1>
+        </template>
+      </MTableColumn>
+      <el-table-column
+        fixed="left"
+        type="selection"
+      />
+      <MTableColumn
+        v-for="item in tableTitle"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :align="item.align"
+        :minWidth="item.minWidth"
+        :className="item.className"
+        :filters="item.filters"
+        :headerAlign="item.headerAlign"
+        :fixed="item.fixed"
+        v-model:filtersValue="filtersValue"
+        showOverflowTooltip
+      >
+      </MTableColumn>
+    </MTable>
+    <h3>树状表格</h3>
     <MTable
       class="style.box"
       :data="tableData"
@@ -3200,11 +3288,6 @@ const options: Option[] = [{
       rowKey="id"
       tableConfigKey="tableConfigKey"
     >
-      <!--<MTableColumn type="expand">-->
-      <!--  <template #default>-->
-      <!--    <h1>测试</h1>-->
-      <!--  </template>-->
-      <!--</MTableColumn>-->
       <MTableColumn
         v-for="item in tableTitle"
         :key="item.prop"
@@ -3220,7 +3303,6 @@ const options: Option[] = [{
         showOverflowTooltip
       >
       </MTableColumn>
-      <!--<template #default="scope">{{ scope.row[item.prop] }}</template>-->
     </MTable>
   </div>
 </template>
@@ -3229,8 +3311,17 @@ const options: Option[] = [{
 import { ref } from 'vue'
 import { useTableConfig } from 'packages/index'
 
+const test = (data: any) => {
+  console.log('data', data)
+}
+
 const tableData = ref<any[]>([])
-const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('MTableDemo', [{
+const { tableTitle, headerDragend, tableConfig, filtersValue } = useTableConfig('MTableDemo', [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left'
+}, {
   label: 'Date',
   prop: 'date',
   minWidth: 200
@@ -3244,58 +3335,59 @@ const { tableTitle, headerDragend, tableConfig, filtersValue }= useTableConfig('
   minWidth: 200
 }], tableData)
 
-tableData.value = [
-  {
-    id: 1,
-    date: '2016-05-03',
-    name: 'Tom1',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Home'
-  },
-  {
-    id: 2,
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  children: [{
+    id: 21,
+    sn: 1,
     date: '2016-05-02',
-    name: 'Tom2',
+    name: 'Tom21',
     address: 'No. 189, Grove St, Los Angeles',
     tag: 'Office',
-    children: [{
-      id: 21,
-      date: '2016-05-02',
-      name: 'Tom21',
-      address: 'No. 189, Grove St, Los Angeles',
-      tag: 'Office',
-    }, {
-      id: 22,
-      date: '2016-05-02',
-      name: 'Tom22',
-      address: 'No. 189, Grove St, Los Angeles',
-      tag: 'Office',
-    }]
-  },
-  {
-    id: 3,
-    date: '2016-05-04',
-    name: 'Tom3',
-    address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Home'
-  },
-  {
-    id: 4,
-    date: '2016-05-01',
-    name: 'Tom4',
+  }, {
+    id: 22,
+    sn: 2,
+    date: '2016-05-02',
+    name: 'Tom22',
     address: 'No. 189, Grove St, Los Angeles',
-    tag: 'Office'
-  }
-]
-
-const pasteData = (obj: any, data: any) => {
-  tableData.value = data
-}
+    tag: 'Office',
+  }]
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0
+}]
 </script>
 
 <style lang="scss" scoped>
 .g-box {
-  max-width: 1200px;
+  max-width: 1000px;
 }
 </style>