bi-element-ui 0.1.48 → 0.1.49

package/src/views/Home.vue

@@ -1,330 +1,330 @@
-<template>
-  <div class="bi-table">
-    <div class="example-table-box">
-      <p>基础表格</p>
-      <!-- <BiCustomColumn
-        column-name="test"
-        :table-column="basicColumn"
-        :default-list="defaultColumnList"
-        :default-column="{
-          left:['date'],
-          center:['name'],
-          right:['other']
-        }"
-        @handleTableColumn="setTableColumn"
-      /> -->
-      <bi-table
-        :loading="tableLoading"
-        border
-        stripe
-        :data="data"
-        pagination
-        :column="basicColumn"
-        :total="100"
-        :auto-scroll="false"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>支持render渲染</p>
-      <bi-table
-        border
-        :data="data"
-        :column="renderColumn"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>支持slot插槽</p>
-      <bi-table
-        border
-        :data="data"
-        :column="slotColumn"
-      >
-        <template v-slot:zip="{ row }">
-          <el-tag
-            class="el-icon-message-solid"
-            type="success"
-          >
-            {{ row.zip }}
-          </el-tag>
-        </template>
-      </bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>支持组件引入</p>
-      <bi-table
-        border
-        :data="data"
-        :column="componentColumn"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>支持树形数据</p>
-      <bi-table
-        border
-        :data="data"
-        :column="componentColumn"
-        default-expand-all
-        row-key="id"
-        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>支持selection/index/expand</p>
-      <bi-table
-        border
-        :data="data"
-        :column="typesColumn"
-      ></bi-table>
-    </div>
-
-    <div class="example-table-box">
-      <p>带分页功能</p>
-      <bi-table
-        border
-        :data="data"
-        :column="complexColumn"
-        :columns-props="columnsProps"
-        pagination
-        :auto-scroll="false"
-        :total="100"
-        :page.sync="listQuery.page"
-        :limit.sync="listQuery.limit"
-        @selection-change="selectionChange"
-        @pagination="getList"
-      >
-      </bi-table>
-
-      <el-dialog
-        title="收货地址"
-        :visible.sync="dialogVisible"
-      >
-        <el-form
-          :model="editForm"
-          label-width="100px"
-        >
-          <el-form-item label="名称">
-            <el-input
-              v-model="editForm.name"
-              autocomplete="off"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="区域">
-            <el-select
-              v-model="editForm.province"
-              placeholder="请选择区域"
-              style="width: 100%"
-            >
-              <el-option
-                label="上海"
-                value="shanghai"
-              ></el-option>
-              <el-option
-                label="北京"
-                value="beijing"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="市区">
-            <el-input v-model="editForm.city"></el-input>
-          </el-form-item>
-          <el-form-item label="地址">
-            <el-input v-model="editForm.address"></el-input>
-          </el-form-item>
-        </el-form>
-        <div
-          slot="footer"
-          class="dialog-footer"
-        >
-          <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button
-            type="primary"
-            @click="dialogVisible = false"
-          >确 定</el-button>
-        </div>
-      </el-dialog>
-    </div>
-
-    <div class="example-table-box">
-      <p>sticky表格</p>
-      <bi-table
-        border
-        stripe
-        fixed="sticky"
-        :data="data"
-        :column="fullscreenColumn"
-      ></bi-table>
-    </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"
-        @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 {
-      basicColumn: [
-        { label: '日期', prop: 'date', sortable: true, fixed: true },
-        { label: '姓名', prop: 'name' },
-        { label: '省份', prop: 'province' },
-        { label: '市区', prop: 'city' },
-        { label: '地址', prop: 'address', width: 300 },
-        { label: '地址2', prop: 'address2', width: 300 },
-        { 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
-    }
-  },
-  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]
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.example-table-box {
-  margin: 25px 50px;
-
-  p {
-    text-align: left;
-    font-weight: 700;
-  }
-}
-</style>
+<template>
+  <div class="bi-table">
+    <div class="example-table-box">
+      <p>基础表格</p>
+      <!-- <BiCustomColumn
+        column-name="test"
+        :table-column="basicColumn"
+        :default-list="defaultColumnList"
+        :default-column="{
+          left:['date'],
+          center:['name'],
+          right:['other']
+        }"
+        @handleTableColumn="setTableColumn"
+      /> -->
+      <bi-table
+        :loading="tableLoading"
+        border
+        stripe
+        :data="data"
+        pagination
+        :column="basicColumn"
+        :total="100"
+        :auto-scroll="false"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>支持render渲染</p>
+      <bi-table
+        border
+        :data="data"
+        :column="renderColumn"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>支持slot插槽</p>
+      <bi-table
+        border
+        :data="data"
+        :column="slotColumn"
+      >
+        <template v-slot:zip="{ row }">
+          <el-tag
+            class="el-icon-message-solid"
+            type="success"
+          >
+            {{ row.zip }}
+          </el-tag>
+        </template>
+      </bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>支持组件引入</p>
+      <bi-table
+        border
+        :data="data"
+        :column="componentColumn"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>支持树形数据</p>
+      <bi-table
+        border
+        :data="data"
+        :column="componentColumn"
+        default-expand-all
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>支持selection/index/expand</p>
+      <bi-table
+        border
+        :data="data"
+        :column="typesColumn"
+      ></bi-table>
+    </div>
+
+    <div class="example-table-box">
+      <p>带分页功能</p>
+      <bi-table
+        border
+        :data="data"
+        :column="complexColumn"
+        :columns-props="columnsProps"
+        pagination
+        :auto-scroll="false"
+        :total="100"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        @selection-change="selectionChange"
+        @pagination="getList"
+      >
+      </bi-table>
+
+      <el-dialog
+        title="收货地址"
+        :visible.sync="dialogVisible"
+      >
+        <el-form
+          :model="editForm"
+          label-width="100px"
+        >
+          <el-form-item label="名称">
+            <el-input
+              v-model="editForm.name"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="区域">
+            <el-select
+              v-model="editForm.province"
+              placeholder="请选择区域"
+              style="width: 100%"
+            >
+              <el-option
+                label="上海"
+                value="shanghai"
+              ></el-option>
+              <el-option
+                label="北京"
+                value="beijing"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="市区">
+            <el-input v-model="editForm.city"></el-input>
+          </el-form-item>
+          <el-form-item label="地址">
+            <el-input v-model="editForm.address"></el-input>
+          </el-form-item>
+        </el-form>
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button
+            type="primary"
+            @click="dialogVisible = false"
+          >确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <div class="example-table-box">
+      <p>sticky表格</p>
+      <bi-table
+        border
+        stripe
+        fixed="sticky"
+        :data="data"
+        :column="fullscreenColumn"
+      ></bi-table>
+    </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"
+        @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 {
+      basicColumn: [
+        { label: '日期', prop: 'date', sortable: true, fixed: true },
+        { label: '姓名', prop: 'name' },
+        { label: '省份', prop: 'province' },
+        { label: '市区', prop: 'city' },
+        { label: '地址', prop: 'address', width: 300 },
+        { label: '地址2', prop: 'address2', width: 300 },
+        { 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
+    }
+  },
+  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]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.example-table-box {
+  margin: 25px 50px;
+
+  p {
+    text-align: left;
+    font-weight: 700;
+  }
+}
+</style>