crud example

Former-commit-id: e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly e345e832b7f55adfa312e0972693939953150e46 [formerly b836828ea96a2163653f09cfd4c39c1fe537b4ac [formerly 030702be43d00a35d004f13dff3bb74dd089f14a]]]]]
Former-commit-id: 5c0961245ea5c8d68bc8a5b647c251340e47c98e
Former-commit-id: 7c0668c675d4339929de35632a278bb2c7c1e62d
Former-commit-id: 75cef2b779bafae654cbd5044cc5eca8eceec67c [formerly 07c3860026c0a560111de35fcf6546dcd0fcd27d]
Former-commit-id: 39d1e5aecd1c0fb8140d3bb348457834a69aa27f
Former-commit-id: d4802ee50b46b8747a9431b60b07016ad8c5c900
Former-commit-id: 5996d6cc294f4232189f181b2b75eeafb11c7eb6
Former-commit-id: 50b5c8a0b27073ab09fa4bdde677c0a249a33a7c
Former-commit-id: 09c6958edf70626c1f1f48b683ca54dcd8131c40

src/pages/demo/d2-crud/demo28/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <d2-container>
+    <template slot="header">自定义加载状态</template>
+    <el-button @click="handleLoading">点我切换加载状态</el-button>
+    <d2-crud
+      style="margin-top: 10px"
+      :columns="columns"
+      :data="data"
+      :loading="loading"
+      :loading-options="loadingOptions"/>
+    <el-card shadow="never" class="d2-mb">
+      <d2-markdown :source="doc"/>
+    </el-card>
+    <el-card shadow="never" class="d2-mb">
+      <d2-highlight :code="code"/>
+    </el-card>
+    <template slot="footer">
+      <d2-link-btn title="文档" link="https://d2-projects.github.io/d2-admin-doc/zh/ecosystem-d2-crud/"/>
+    </template>
+  </d2-container>
+</template>
+
+<script>
+import doc from './doc.md'
+import code from './code.js'
+
+export default {
+  data () {
+    return {
+      doc,
+      code,
+      columns: [
+        {
+          title: '日期',
+          key: 'date'
+        },
+        {
+          title: '姓名',
+          key: 'name'
+        },
+        {
+          title: '地址',
+          key: 'address'
+        }
+      ],
+      data: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-04',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1517 弄'
+        },
+        {
+          date: '2016-05-01',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1519 弄'
+        },
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1516 弄'
+        }
+      ],
+      loading: true,
+      loadingOptions: {
+        text: '拼命加载中',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.8)'
+      }
+    }
+  },
+  methods: {
+    handleLoading () {
+      this.loading = !this.loading
+    }
+  }
+}
+</script>