feat: add column desc api and example (#2)

Co-authored-by: GU Yiling <justice360@gmail.com>

nuxt.config.js

@@ -10,6 +10,7 @@ function appendLoader (config, loader) {
 
 module.exports = {
   target: 'static',
+  telemetry: false,
 
   /**
    * Headers of the page

one/docs/components/column.md

@@ -20,6 +20,7 @@
 | `sortable` | `boolean=` | `false` | [^sortable] |
 | `align` | `string=` | - | 内容对齐方式，支持 `left`/`center`/`right`。 |
 | `span` | `function(number): Object=` | | [^span] |
+| `desc` | `string` | - | 表头描述。 |
 
 ^^^sortable
 本列是否支持排序。
@@ -45,6 +46,7 @@
 | `foot` | [^slot-foot] |
 | `default` | [^scoped-slot-default] |
 | `sub-row` | [^scoped-slot-sub-row] |
+| `desc` | [^scoped-slot-desc] |
 
 ^^^slot-foot
 列脚区域。
@@ -73,3 +75,7 @@
 如果所属的 `Table` 组件定义了插槽 `sub-row`，单独列的 `sub-row` 将被覆盖。
 :::
 ^^^
+
+^^^scoped-slot-desc
+表头描述。提供 `close` 函数，用于关闭展现描述内容的容器。使用此插槽时会覆盖 `Column` 的插槽 `desc` 内容。
+^^^

one/docs/components/table.md

@@ -36,6 +36,12 @@
 
 [[ demo src="/demo/table/expandable.vue" ]]
 
+### 表头描述
+
+使用 `desc` 属性或 `desc` 插槽来为表头增加描述信息。
+
+[[ demo src="/demo/table/desc.vue" ]]
+
 ## API
 
 ### 属性

one/docs/demo/table/desc.vue

@@ -0,0 +1,93 @@
+<template>
+<article>
+  <section>
+    <veui-table
+      :ui="ui"
+      :data="data"
+      key-field="id"
+    >
+      <veui-table-column
+        field="id"
+        title="ID"
+      />
+      <veui-table-column
+        field="name"
+        title="Name"
+        :desc="nameDesc"
+      />
+      <veui-table-column
+        field="bid"
+        title="Bid"
+        width="160"
+        align="right"
+      >
+        <template slot-scope="{ bid }">
+          {{ bid | currency }}
+        </template>
+        <template #desc="{ close }">
+          <p>This is a description for bid.</p>
+          <veui-button @click="close">close</veui-button>
+        </template>
+      </veui-table-column>
+    </veui-table>
+  </section>
+</article>
+</template>
+
+<script>
+import { Table, Column, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-table': Table,
+    'veui-table-column': Column,
+    'veui-button': Button
+  },
+  filters: {
+    currency (value) {
+      return '¥' + value.toFixed(2)
+    }
+  },
+  data () {
+    return {
+      data: [
+        {
+          id: '31541',
+          name: 'Steve Rogers',
+          bid: 1024,
+          updateDate: '20131117'
+        },
+        {
+          id: '31552',
+          name: 'Thor Odinson',
+          bid: 598,
+          updateDate: '20140214'
+        },
+        {
+          id: '31563',
+          name: 'Tony Stark',
+          bid: 820,
+          updateDate: '20170610'
+        },
+        {
+          id: '31574',
+          name: 'Stephen Strange',
+          bid: 736,
+          updateDate: '20180109'
+        }
+      ],
+      nameDesc: 'This is a description for name.'
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section {
+  margin-bottom: 20px;
+}
+
+h4 {
+  margin-top: 0;
+}
+</style>