bi-element-ui 0.1.49 → 0.1.50

package/src/views/Table.vue

@@ -1,220 +1,220 @@
-<template>
-  <div>
-    <el-button
-      type=""
-      @click="search"
-    >搜索</el-button>
-    <div
-      class="example-table-box"
-      style="padding-top:20px"
-    >
-      <p>sticky表格</p>
-      <bi-table
-        ref="table"
-        border
-        stripe
-        fixed="sticky"
-        :data="data"
-        :column="basicColumn"
-        show-summary
-        :summary-method="getSummaries"
-      ></bi-table>
-    </div>
-
-    <!-- <div style="padding-bottom:600px"></div>
-    <div class="example-table-box">
-      <p>普通固定表头</p>
-      <bi-table
-        border
-        stripe
-        fixed="fullscreen"
-        :data="data"
-        :column="fullscreenColumn"
-        max-height="200px"
-        fixed-offset="60"
-        pagination
-        :auto-scroll="false"
-        :total="100"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        show-summary
-        @selection-change="selectionChange"
-        @pagination="getList"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>sticky-tabs表格</p>
-      <el-tabs>
-        <el-tab-pane label="tabs">
-          <div style="height:300px;background:#eee"></div>
-          <bi-table
-            border
-            stripe
-            fixed="sticky"
-            :data="data"
-            :column="fullscreenColumn"
-            :summary-method="getSummaries"
-            show-summary
-          ></bi-table>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-    <div class="example-table-box">
-      <p>tooltipIcon在表格内的组件使用</p>
-      <bi-table
-        border
-        stripe
-        fixed="sticky"
-        :data="minData"
-        :column="renderColumn"
-      >
-        <template v-slot:province="{row}">
-          <BiTooltipIcon
-            :label="row.province"
-            content="这是props继承的写法,<br/>可根据不同需求配置属性"
-            placement="right"
-            icon="el-icon-warning-outline"
-            effect="light"
-          ></BiTooltipIcon>
-        </template>
-        <template v-slot:city="{row}">
-          <BiTooltipIcon placement="right">
-            <template slot="tip-label"><span>{{ row.city }}</span></template>
-            <template slot="tip-content"><span>这是slot默认替换的写法,可用自定义的内容配合tooltip使用</span></template>
-            <template slot="tip-icon">
-              <i
-                class="el-icon-chat-dot-round"
-                style="color:#ff6700"
-              ></i>
-            </template>
-          </BiTooltipIcon>
-        </template>
-      </bi-table>
-    </div> -->
-  </div>
-</template>
-
-<script>
-// import BiTable from '@/components/BiTable'
-import TableData from '@/table.js'
-// import BiTableColumn from '@/components/BiTableColumn'
-// import BiTooltipIcon from '@/components/BiTooltipIcon'
-export default {
-  components: {
-    // BiTooltipIcon
-    // BiTable
-    // BiTableColumn
-  },
-  mixins: [TableData],
-  data() {
-    return {
-      basicData2: [],
-      basicColumn: [
-        { label: '日期', prop: 'date', sortable: true, fixed: true },
-        { label: '姓名', prop: 'name' },
-        { label: '省份', prop: 'province' },
-        { label: '市区', prop: 'city' },
-        {
-          label: '地址',
-          prop: 'address',
-          width: () => {
-            return this.aaWidth
-          }
-        },
-        {
-          label: '地址2',
-          prop: 'address2',
-          minWidth: () => {
-            return '100'
-          }
-        },
-        { label: '邮编', prop: 'zip' },
-        {
-          label: 'v-model',
-          prop: 'other',
-          fixed: 'right',
-          render: (h, scope) => {
-            return h('input', {
-              on: {
-                input(event) {
-                  scope.row.name = event.target.value
-                }
-              },
-              domProps: {
-                value: scope.row.name
-              },
-              style: {
-                width: '100%',
-                minHeight: '30px',
-                color: 'red',
-                border: '1px solid #ddd'
-              }
-            })
-          }
-        }
-      ],
-      tableLoading: false,
-      columnsProps: {
-        width: 'auto'
-      },
-      total: 0,
-      listQuery: {
-        page: 2,
-        limit: 20
-      },
-      editForm: {},
-      dialogVisible: false
-    }
-  },
-  computed: {
-    aaWidth() {
-      return 400
-    }
-  },
-  methods: {
-    selectionChange(rows) {
-      console.log('selected', rows)
-    },
-    getList() {},
-    openDialog({ row }) {
-      this.editForm = Object.assign({}, row)
-      this.dialogVisible = true
-    },
-    setTableColumn(column) {
-      // this.tableLoading = true
-      this.$set(this, 'basicColumn', [])
-      setTimeout(() => {
-        this.$set(this, 'basicColumn', column)
-        // this.tableLoading = false
-      }, 10)
-    },
-
-    getSummaries() {
-      return ['合计', '2016-05-03', '王小虎', '上海', '普陀区', '上海市普陀区金沙江路 1518 弄', '上海市普陀区金沙江路 1518 弄', 200333]
-    },
-    search() {
-      const list = JSON.parse(JSON.stringify(this.data))
-      this.data = list.splice(0, 7)
-      // this.tableList2 = this.minData
-      this.$nextTick(() => {
-        this.$refs.table.resetHeaderFooter && this.$refs.table.resetHeaderFooter()
-        // var evt = window.document.createEvent('UIEvents')
-        // evt.initUIEvent('scroll', true, false, window, 0)
-        // window.dispatchEvent(evt)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.example-table-box {
-  margin: 25px 50px;
-
-  p {
-    text-align: left;
-    font-weight: 700;
-  }
-}
-</style>
+<template>
+  <div>
+    <el-button
+      type=""
+      @click="search"
+    >搜索</el-button>
+    <div
+      class="example-table-box"
+      style="padding-top:20px"
+    >
+      <p>sticky表格</p>
+      <bi-table
+        ref="table"
+        border
+        stripe
+        fixed="sticky"
+        :data="data"
+        :column="basicColumn"
+        show-summary
+        :summary-method="getSummaries"
+      ></bi-table>
+    </div>
+
+    <!-- <div style="padding-bottom:600px"></div>
+    <div class="example-table-box">
+      <p>普通固定表头</p>
+      <bi-table
+        border
+        stripe
+        fixed="fullscreen"
+        :data="data"
+        :column="fullscreenColumn"
+        max-height="200px"
+        fixed-offset="60"
+        pagination
+        :auto-scroll="false"
+        :total="100"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        show-summary
+        @selection-change="selectionChange"
+        @pagination="getList"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>sticky-tabs表格</p>
+      <el-tabs>
+        <el-tab-pane label="tabs">
+          <div style="height:300px;background:#eee"></div>
+          <bi-table
+            border
+            stripe
+            fixed="sticky"
+            :data="data"
+            :column="fullscreenColumn"
+            :summary-method="getSummaries"
+            show-summary
+          ></bi-table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div class="example-table-box">
+      <p>tooltipIcon在表格内的组件使用</p>
+      <bi-table
+        border
+        stripe
+        fixed="sticky"
+        :data="minData"
+        :column="renderColumn"
+      >
+        <template v-slot:province="{row}">
+          <BiTooltipIcon
+            :label="row.province"
+            content="这是props继承的写法,<br/>可根据不同需求配置属性"
+            placement="right"
+            icon="el-icon-warning-outline"
+            effect="light"
+          ></BiTooltipIcon>
+        </template>
+        <template v-slot:city="{row}">
+          <BiTooltipIcon placement="right">
+            <template slot="tip-label"><span>{{ row.city }}</span></template>
+            <template slot="tip-content"><span>这是slot默认替换的写法,可用自定义的内容配合tooltip使用</span></template>
+            <template slot="tip-icon">
+              <i
+                class="el-icon-chat-dot-round"
+                style="color:#ff6700"
+              ></i>
+            </template>
+          </BiTooltipIcon>
+        </template>
+      </bi-table>
+    </div> -->
+  </div>
+</template>
+
+<script>
+// import BiTable from '@/components/BiTable'
+import TableData from '@/table.js'
+// import BiTableColumn from '@/components/BiTableColumn'
+// import BiTooltipIcon from '@/components/BiTooltipIcon'
+export default {
+  components: {
+    // BiTooltipIcon
+    // BiTable
+    // BiTableColumn
+  },
+  mixins: [TableData],
+  data() {
+    return {
+      basicData2: [],
+      basicColumn: [
+        { label: '日期', prop: 'date', sortable: true, fixed: true },
+        { label: '姓名', prop: 'name' },
+        { label: '省份', prop: 'province' },
+        { label: '市区', prop: 'city' },
+        {
+          label: '地址',
+          prop: 'address',
+          width: () => {
+            return this.aaWidth
+          }
+        },
+        {
+          label: '地址2',
+          prop: 'address2',
+          minWidth: () => {
+            return '100'
+          }
+        },
+        { label: '邮编', prop: 'zip' },
+        {
+          label: 'v-model',
+          prop: 'other',
+          fixed: 'right',
+          render: (h, scope) => {
+            return h('input', {
+              on: {
+                input(event) {
+                  scope.row.name = event.target.value
+                }
+              },
+              domProps: {
+                value: scope.row.name
+              },
+              style: {
+                width: '100%',
+                minHeight: '30px',
+                color: 'red',
+                border: '1px solid #ddd'
+              }
+            })
+          }
+        }
+      ],
+      tableLoading: false,
+      columnsProps: {
+        width: 'auto'
+      },
+      total: 0,
+      listQuery: {
+        page: 2,
+        limit: 20
+      },
+      editForm: {},
+      dialogVisible: false
+    }
+  },
+  computed: {
+    aaWidth() {
+      return 400
+    }
+  },
+  methods: {
+    selectionChange(rows) {
+      console.log('selected', rows)
+    },
+    getList() {},
+    openDialog({ row }) {
+      this.editForm = Object.assign({}, row)
+      this.dialogVisible = true
+    },
+    setTableColumn(column) {
+      // this.tableLoading = true
+      this.$set(this, 'basicColumn', [])
+      setTimeout(() => {
+        this.$set(this, 'basicColumn', column)
+        // this.tableLoading = false
+      }, 10)
+    },
+
+    getSummaries() {
+      return ['合计', '2016-05-03', '王小虎', '上海', '普陀区', '上海市普陀区金沙江路 1518 弄', '上海市普陀区金沙江路 1518 弄', 200333]
+    },
+    search() {
+      const list = JSON.parse(JSON.stringify(this.data))
+      this.data = list.splice(0, 7)
+      // this.tableList2 = this.minData
+      this.$nextTick(() => {
+        this.$refs.table.resetHeaderFooter && this.$refs.table.resetHeaderFooter()
+        // var evt = window.document.createEvent('UIEvents')
+        // evt.initUIEvent('scroll', true, false, window, 0)
+        // window.dispatchEvent(evt)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.example-table-box {
+  margin: 25px 50px;
+
+  p {
+    text-align: left;
+    font-weight: 700;
+  }
+}
+</style>