d2-crud 带状态表格

Former-commit-id: aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly aedacbb884050bcbeba78dd93d47d8c02d569ca1 [formerly ce8ae5380804ac0d94aea1f143abd516b13919d5 [formerly 6a53e667ed4edda557ff526b3d9d35515ccd4483]]]]]
Former-commit-id: 5a8675d99ef0308aac368cc28d8a3aca90d610c6
Former-commit-id: d22b37bc78dc3eeac87946bb9607987c7cf23dc5
Former-commit-id: fc72d7367b05034cf21eac251c962242e0427306 [formerly 907af2041fe52543e30f08fc23499e92ade73ccb]
Former-commit-id: 5a72d7ba890bcb341e77695610bab39e3e630335
Former-commit-id: 8204a10ee32924f1a5ac6d294d46a089cf5b7d3a
Former-commit-id: 52a4ee4ef3a6d5b007195fcbe8a9361c9dd6cce9
Former-commit-id: b36beb64839ecbd2ac7dcf47d3f0f98c9649faa1
Former-commit-id: f28040967965e0354bb0c42c417ed8c4e0557d69

src/menu/modules/demo-d2-crud.js

@@ -6,6 +6,7 @@ export default {
     { path: `${pre}index`, title: 'D2 CRUD 首页', icon: 'home' },
     { path: `${pre}demo1`, title: '基础表格' },
     { path: `${pre}demo2`, title: '带斑马纹表格' },
-    { path: `${pre}demo3`, title: '带边框表格' }
+    { path: `${pre}demo3`, title: '带边框表格' },
+    { path: `${pre}demo4`, title: '带状态表格' }
   ])('/demo/d2-crud/')
 }

src/pages/demo/d2-crud/demo1/doc.md

@@ -0,0 +1 @@
+在 `D2 Crud` 组件中传入 `columns` 和 `data` 对象数组，即可创建一个最基础的表格，可以在 `columns` 对象中传入 `width` 属性来控制列宽。代码如下：

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

@@ -5,9 +5,7 @@
       :columns="columns"
       :data="data"/>
     <el-card shadow="never" class="d2-mb">
-      <p>
+      <d2-markdown :source="doc"/>
-        在d2-crud元素中注入columns和data对象数组，即可创建一个最基础的表格，可以在columns对象中传入width属性来控制列宽。代码如下：
-      </p>
     </el-card>
     <el-card shadow="never" class="d2-mb">
       <d2-highlight :code="code"/>
@@ -19,11 +17,13 @@
 </template>
 
 <script>
+import doc from './doc.md'
 import code from './code.js'
 
 export default {
   data () {
     return {
+      doc,
       code,
       columns: [
         {

src/pages/demo/d2-crud/demo2/doc.md

@@ -0,0 +1 @@
+`options` 对象可以对表格进行配置，其中 `stripe` 属性可以创建带斑马纹的表格。它接受一个 `Boolean` ，设置为 `true` 即为启用。代码如下：

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

@@ -6,9 +6,7 @@
       :data="data"
       :options="options"/>
     <el-card shadow="never" class="d2-mb">
-      <p>
+      <d2-markdown :source="doc"/>
-        options对象可以对表格进行配置，其中stripe属性可以创建带斑马纹的表格。它接受一个Boolean，设置为true即为启用。代码如下：
-      </p>
     </el-card>
     <el-card shadow="never" class="d2-mb">
       <d2-highlight :code="code"/>
@@ -20,11 +18,13 @@
 </template>
 
 <script>
+import doc from './doc.md'
 import code from './code.js'
 
 export default {
   data () {
     return {
+      doc,
       code,
       columns: [
         {

src/pages/demo/d2-crud/demo3/doc.md

@@ -0,0 +1 @@
+默认情况下， `D2 Crud` 是不具有竖直方向的边框的，如果需要，可以在 `options` 对象中传入一个 `border` 属性，它接受一个 `Boolean` ，设置为 `true` 即可启用。代码如下：

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

@@ -6,9 +6,7 @@
       :data="data"
       :options="options"/>
     <el-card shadow="never" class="d2-mb">
-      <p>
+      <d2-markdown :source="doc"/>
-        默认情况下，D2-Crud是不具有竖直方向的边框的，如果需要，可以在options对象中传入一个border属性，它接受一个Boolean，设置为true即可启用。代码如下：
-      </p>
     </el-card>
     <el-card shadow="never" class="d2-mb">
       <d2-highlight :code="code"/>
@@ -20,11 +18,13 @@
 </template>
 
 <script>
+import doc from './doc.md'
 import code from './code.js'
 
 export default {
   data () {
     return {
+      doc,
       code,
       columns: [
         {

src/pages/demo/d2-crud/demo4/code.js

@@ -0,0 +1,75 @@
+export default `<template>
+  <div>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      columns: [
+        {
+          title: '日期',
+          key: 'date',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        rowClassName ({row, rowIndex}) {
+          if (rowIndex === 1) {
+            return 'warning-row'
+          } else if (rowIndex === 3) {
+            return 'success-row'
+          }
+          return ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>`

src/pages/demo/d2-crud/demo4/doc.md

@@ -0,0 +1 @@
+可以通过指定 `D2 Crud` 组件 `options` 对象中的 `rowClassName` 属性来为 `D2 Crud` 中的某一行添加 `class` ，表明该行处于某种状态。代码如下：

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

@@ -0,0 +1,90 @@
+<template>
+  <d2-container>
+    <template slot="header">带状态表格</template>
+    <d2-crud
+      :columns="columns"
+      :data="data"
+      :options="options"/>
+    <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="D2 CRUD" link="https://github.com/d2-projects/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',
+          width: '180'
+        },
+        {
+          title: '姓名',
+          key: 'name',
+          width: '180'
+        },
+        {
+          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 弄'
+        }
+      ],
+      options: {
+        rowClassName ({row, rowIndex}) {
+          if (rowIndex === 1) {
+            return 'warning-row'
+          } else if (rowIndex === 3) {
+            return 'success-row'
+          }
+          return ''
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background: oldlace;
+}
+
+.el-table .success-row {
+  background: #f0f9eb;
+}
+</style>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-3e7ad2954b31e28ac24d807efc726b59b2b1bd1b
+8b9146b67b3500e79e3547a57199c9c38fa840e1