br-dionysus 1.17.7 → 1.18.0

package/packages/MTable/docs/DemoTest6.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <h5>选中单元格</h5>
+    <p>selectionCell: {{ selectionCell }}</p>
+    <MTable
+      :data="tableData"
+      border
+      scrollbarAlwaysOn
+      v-model:selectionCell="selectionCell"
+    >
+      <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"
+        :isBatchEdit="item.isBatchEdit"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MTableColumn } from './../../MTableColumn'
+
+const tableData = ref<Record<string, string | number>[]>([])
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 10
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 101
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 102
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 103
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 104
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 105
+}]
+
+const tableTitle: TableTitle[] = [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left',
+  isBatchEdit: true
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '数量',
+  prop: 'qty',
+  minWidth: 200,
+  isBatchEdit: true
+}]
+
+const selectionCell = ref<string>('')
+</script>
+
+<style>
+</style>

package/packages/MTable/docs/DemoTest7.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <h5>合计行</h5>
+    <MTable
+      :data="tableData"
+      border
+      showSummary
+      sumText="合"
+      scrollbarAlwaysOn
+    >
+      <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"
+        :isSummary="item.isSummary"
+        :isBatchEdit="item.isBatchEdit"
+        showOverflowTooltip
+      ></MTableColumn>
+    </MTable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MTableColumn } from './../../MTableColumn'
+
+const tableData = ref<Record<string, string | number>[]>([])
+tableData.value = [{
+  id: 1,
+  sn: 1,
+  date: '2016-05-03',
+  name: 'Tom1',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 10,
+  day: 100
+}, {
+  id: 2,
+  sn: 2,
+  date: '2016-05-02',
+  name: 'Tom2',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 101,
+  day: 100
+}, {
+  id: 3,
+  sn: 3,
+  date: '2016-05-04',
+  name: 'Tom3',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Home',
+  pid: 0,
+  qty: 102,
+  day: 100
+}, {
+  id: 4,
+  sn: 4,
+  date: '2016-05-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 103,
+  day: 100
+}, {
+  id: 5,
+  sn: 5,
+  date: '2016-05-05',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 104,
+  day: 100
+}, {
+  id: 6,
+  sn: 6,
+  date: '2016-06-01',
+  name: 'Tom4',
+  address: 'No. 189, Grove St, Los Angeles',
+  tag: 'Office',
+  pid: 0,
+  qty: 105,
+  day: 100
+}]
+
+const tableTitle: TableTitle[] = [{
+  label: '序号',
+  prop: 'sn',
+  minWidth: 200,
+  fixed: 'left',
+  isBatchEdit: false
+}, {
+  label: '时间',
+  prop: 'date',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '数量',
+  prop: 'qty',
+  minWidth: 200,
+  isBatchEdit: true,
+  isSummary: true
+}, {
+  label: '天数',
+  prop: 'day',
+  minWidth: 200,
+  isBatchEdit: true,
+  isSummary: false
+}, {
+  label: '地址',
+  prop: 'address',
+  minWidth: 200,
+  isBatchEdit: true
+}, {
+  label: '名称',
+  prop: 'name',
+  minWidth: 200,
+  isBatchEdit: true
+}]
+</script>
+
+<style>
+</style>

package/packages/MTable/docs/README.md

@@ -13,16 +13,16 @@ import demo from './demo.vue'
 
 ### 2) Attributes
 
-| 参数                      | 说明                          | 类型                    | 可选值 | 默认值                                                 |
-|-------------------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
-| data                    | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
-| sole                    | 行的唯一值                       | String , number       | -   | key                                                 |
-| filtersValue            | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
-| expandProp              | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
-| tableConfigKey          | 表格配置key                     | string                | -   | ''                                                  |
-| showSelectionCellStatus | 显示单元格选中状态                   | boolean               | -   | false                                               |
-| selectionCell           | 选中列(必须showSelection为true)   | string                | -   | ''                                                  |
-| 其余参数                    | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
+| 参数             | 说明                          | 类型                    | 可选值 | 默认值                                                 |
+|----------------|-----------------------------|-----------------------|-----|-----------------------------------------------------|
+| data           | 表格的数据                       | Record<string, any>[] | -   | [ ]                                                 |
+| sole           | 行的唯一值                       | String , number       | -   | key                                                 |
+| filtersValue   | 表格内容筛选(当为null时，不显示筛选图标)     | Function \| null      | -   | null                                                |
+| expandProp     | 展开图标列(如使用这个属性则必须存在rowKey属性) | string                | -   | ''                                                  |
+| tableConfigKey | 表格配置key                     | string                | -   | ''                                                  |
+| selectionCell  | 选中列                         | string                | -   | ''                                                  |
+| circleTotal    | 是否圈选合计                      | boolean               | -   | true                                                |
+| 其余参数           | 参考el官网的table                | any                   | -   | https://element-plus.org/zh-CN/component/table.html |
 
 ## 要求
 

package/packages/MTable/docs/demo.vue

@@ -12,7 +12,13 @@
     <!--<DemoTest4></DemoTest4>-->
     <!--<el-divider />-->
 
-    <DemoTest5></DemoTest5>
+    <!--<DemoTest5></DemoTest5>-->
+    <!--<el-divider />-->
+
+    <!--<DemoTest6></DemoTest6>-->
+    <!--<el-divider />-->
+
+    <DemoTest7></DemoTest7>
     <el-divider />
   </div>
 </template>
@@ -22,7 +28,9 @@
 // import DemoTest2 from 'packages/MTable/docs/DemoTest2.vue'
 // import DemoTest3 from 'packages/MTable/docs/DemoTest3.vue'
 // import DemoTest4 from 'packages/MTable/docs/DemoTest4.vue'
-import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
+// import DemoTest5 from 'packages/MTable/docs/DemoTest5.vue'
+// import DemoTest6 from 'packages/MTable/docs/DemoTest6.vue'
+import DemoTest7 from 'packages/MTable/docs/DemoTest7.vue'
 </script>
 
 <style lang="scss" scoped>

package/packages/MTable/src/MBatchEdit.vue

@@ -5,6 +5,7 @@
       :size="props.size"
       icon="Brush"
       @click="open(props.selectionCell)"
+      @mousedown.stop
     >
       批改
     </el-button>