@opentiny/vue-docs 3.16.2 → 3.17.1

package/demos/pc/app/grid/row-grouping/row-group-scroll-composition-api.vue

@@ -0,0 +1,110 @@
+<template>
+  <tiny-grid
+    height="320px"
+    class="grid-grouping"
+    column-min-width="180px"
+    :row-group="rowGroup"
+    :optimization="optimization"
+    :data="data"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市1" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域1" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份1" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称1" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话1" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市2" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域2" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份2" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称2" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话2" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市3" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域3" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话3" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市4" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域4" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话4" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市5" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域5" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话5" sortable></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const codePointA = 'A'.codePointAt(0)
+const areas = ['华东区', '华南区', '华中区', '西南区']
+const provinces = ['福建省', '广东省', '湖北省', '广西省', '云南省']
+const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '南宁', '北海', '桂林', '昆明']
+const getChar = () => String.fromCodePoint(codePointA + Math.floor(Math.random() * 26))
+const getName = () => `${getChar()}${getChar()}${getChar()}科技有限公司`
+const getArea = () => areas[Math.floor(Math.random() * 4)]
+const getProvince = () => provinces[Math.floor(Math.random() * 5)]
+const getCity = () => citys[Math.floor(Math.random() * 12)]
+const getTelephone = (i) => '188' + String(i).padStart(8, '0')
+const row = { id: '', name: '', area: '', province: '', city: '', telephone: '' }
+const total = 10000
+const rows = Array(total)
+  .fill(0)
+  .map((item, i) => {
+    const r = JSON.parse(JSON.stringify(row))
+    r.id = i + 1
+    r.name = getName()
+    r.area = getArea()
+    r.province = getProvince()
+    r.city = getCity()
+    r.telephone = getTelephone(i)
+    return r
+  })
+
+const rowGroup = ref({ field: 'area' })
+const optimization = ref({
+  scrollX: { gt: 15, rSize: 14, vSize: 10 },
+  scrollY: { gt: 15, rSize: 20 }
+})
+const data = ref(rows)
+const cityFilter = ref({
+  multi: true,
+  enumable: true,
+  defaultFilter: false,
+  inputFilter: false
+})
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>

package/demos/pc/app/grid/row-grouping/row-group-scroll.spec.js

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('分组表格虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-row-grouping#row-group-scroll')
+  const row = page.locator('.tiny-grid-body__row')
+  await expect(row.nth(1).locator('.tiny-grid-cell').first()).toContainText('1')
+  await row.first().click()
+  await page.mouse.wheel(0, 500)
+  await page.waitForTimeout(500)
+  await page.mouse.wheel(0, -500)
+  await expect(row.nth(1).locator('.tiny-grid-body__column').first()).toContainText('')
+})

package/demos/pc/app/grid/row-grouping/row-group-scroll.vue

@@ -0,0 +1,119 @@
+<template>
+  <tiny-grid
+    height="320px"
+    class="grid-grouping"
+    column-min-width="180px"
+    :row-group="rowGroup"
+    :optimization="optimization"
+    :data="data"
+  >
+    <tiny-grid-column type="index" width="60"></tiny-grid-column>
+    <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域" :filter="cityFilter" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市1" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域1" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份1" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称1" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话1" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市2" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域2" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份2" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称2" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话2" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市3" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域3" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话3" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市4" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域4" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话4" sortable></tiny-grid-column>
+
+    <tiny-grid-column field="city" title="城市5" sortable></tiny-grid-column>
+    <tiny-grid-column field="area" title="区域5" sortable></tiny-grid-column>
+    <tiny-grid-column field="province" title="省份5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="公司名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="telephone" title="联系电话5" sortable></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script>
+import { Grid, GridColumn } from '@opentiny/vue'
+
+const codePointA = 'A'.codePointAt(0)
+const areas = ['华东区', '华南区', '华中区', '西南区']
+const provinces = ['福建省', '广东省', '湖北省', '广西省', '云南省']
+const citys = ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门', '南宁', '北海', '桂林', '昆明']
+const getChar = () => String.fromCodePoint(codePointA + Math.floor(Math.random() * 26))
+const getName = () => `${getChar()}${getChar()}${getChar()}科技有限公司`
+const getArea = () => areas[Math.floor(Math.random() * 4)]
+const getProvince = () => provinces[Math.floor(Math.random() * 5)]
+const getCity = () => citys[Math.floor(Math.random() * 12)]
+const getTelephone = (i) => '188' + String(i).padStart(8, '0')
+const row = { id: '', name: '', area: '', province: '', city: '', telephone: '' }
+const total = 10000
+const rows = Array(total)
+  .fill(0)
+  .map((item, i) => {
+    const r = JSON.parse(JSON.stringify(row))
+    r.id = i + 1
+    r.name = getName()
+    r.area = getArea()
+    r.province = getProvince()
+    r.city = getCity()
+    r.telephone = getTelephone(i)
+    return r
+  })
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      rowGroup: { field: 'area' },
+      optimization: {
+        scrollX: { gt: 15, rSize: 14, vSize: 10 },
+        scrollY: { gt: 15, rSize: 20 }
+      },
+      data: rows,
+      cityFilter: {
+        multi: true,
+        enumable: true,
+        defaultFilter: false,
+        inputFilter: false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>

package/demos/pc/app/grid/row-grouping/row-grouping-colspan-composition-api.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="grid-grouping">
+    <tiny-grid height="320px" setting :row-group="rowGroup" :data="data">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
+      <!-- <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column> -->
+      <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+
+const data = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    area: '华东区',
+    province: '福建省',
+    city: '福州',
+    telephone: '15010000001'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    area: '华南区',
+    province: '广东省',
+    city: '深圳',
+    telephone: '15010000002'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    province: '广东省',
+    city: '中山',
+    telephone: '15010000003'
+  },
+  {
+    id: '4',
+    name: 'TGB科技有限公司',
+    area: '华东区',
+    province: '福建省',
+    city: '龙岩',
+    telephone: '15010000004'
+  },
+  {
+    id: '5',
+    name: 'YHN科技有限公司',
+    area: '华南区',
+    province: '广东省',
+    city: '韶关',
+    telephone: '15010000005'
+  },
+  {
+    id: '6',
+    name: 'WSX科技有限公司',
+    area: '华中区',
+    province: '湖北省',
+    city: '黄冈',
+    telephone: '15010000006'
+  },
+  {
+    id: '7',
+    name: 'KBG物业有限公司',
+    area: '华中区',
+    province: '湖北省',
+    city: '赤壁',
+    telephone: '15010000007'
+  },
+  {
+    id: '8',
+    name: '深圳市福德宝网络技术有限公司',
+    address: '厦门岛内',
+    area: '华东区',
+    city: '厦门',
+    telephone: '15010000008'
+  },
+  {
+    id: '9',
+    name: 'UJM有限责任公司',
+    area: '华南区',
+    province: '广西省',
+    city: '南宁',
+    telephone: '15010000009'
+  },
+  {
+    id: '10',
+    name: 'IKA有限责任公司',
+    area: '华南区',
+    province: '广西省',
+    city: '北海',
+    telephone: '15510000001'
+  },
+  {
+    id: '11',
+    name: 'TIG管理有限公司',
+    area: '华南区',
+    province: '广西省',
+    city: '桂林',
+    telephone: '15510000002'
+  },
+  {
+    id: '12',
+    name: 'GGT科技有限公司',
+    area: '西南区',
+    province: '云南省',
+    city: '昆明',
+    telephone: '15510000003'
+  }
+])
+
+const rowGroup = ref({ field: 'province', colspan: 2 })
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>

package/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('分组表格虚拟滚动', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('grid-row-grouping#row-grouping-colspan')
+  const row = page.locator('.tiny-grid-body__row')
+  await expect(row.nth(0).locator('.tiny-grid-body__column').nth(2)).toHaveAttribute('colspan', '2')
+})

package/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="grid-grouping">
+    <tiny-grid height="320px" setting :row-group="rowGroup" :data="data">
+      <tiny-grid-column type="index" width="60"></tiny-grid-column>
+      <tiny-grid-column type="selection" width="60"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
+      <!-- <tiny-grid-column field="province" title="省份" sortable></tiny-grid-column> -->
+      <tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
+      <tiny-grid-column field="name" title="公司名称" sortable></tiny-grid-column>
+      <tiny-grid-column field="telephone" title="联系电话" sortable></tiny-grid-column>
+    </tiny-grid>
+  </div>
+</template>
+
+<script>
+import { Grid, GridColumn, Pager } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      Pager,
+      data: [
+        {
+          id: '1',
+          name: 'GFD科技有限公司',
+          area: '华东区',
+          province: '福建省',
+          city: '福州',
+          telephone: '15010000001'
+        },
+        {
+          id: '2',
+          name: 'WWW科技有限公司',
+          area: '华南区',
+          province: '广东省',
+          city: '深圳',
+          telephone: '15010000002'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          province: '广东省',
+          city: '中山',
+          telephone: '15010000003'
+        },
+        {
+          id: '4',
+          name: 'TGB科技有限公司',
+          area: '华东区',
+          province: '福建省',
+          city: '龙岩',
+          telephone: '15010000004'
+        },
+        {
+          id: '5',
+          name: 'YHN科技有限公司',
+          area: '华南区',
+          province: '广东省',
+          city: '韶关',
+          telephone: '15010000005'
+        },
+        {
+          id: '6',
+          name: 'WSX科技有限公司',
+          area: '华中区',
+          province: '湖北省',
+          city: '黄冈',
+          telephone: '15010000006'
+        },
+        {
+          id: '7',
+          name: 'KBG物业有限公司',
+          area: '华中区',
+          province: '湖北省',
+          city: '赤壁',
+          telephone: '15010000007'
+        },
+        {
+          id: '8',
+          name: '深圳市福德宝网络技术有限公司',
+          address: '厦门岛内',
+          area: '华东区',
+          city: '厦门',
+          telephone: '15010000008'
+        },
+        {
+          id: '9',
+          name: 'UJM有限责任公司',
+          area: '华南区',
+          province: '广西省',
+          city: '南宁',
+          telephone: '15010000009'
+        },
+        {
+          id: '10',
+          name: 'IKA有限责任公司',
+          area: '华南区',
+          province: '广西省',
+          city: '北海',
+          telephone: '15510000001'
+        },
+        {
+          id: '11',
+          name: 'TIG管理有限公司',
+          area: '华南区',
+          province: '广西省',
+          city: '桂林',
+          telephone: '15510000002'
+        },
+        {
+          id: '12',
+          name: 'GGT科技有限公司',
+          area: '西南区',
+          province: '云南省',
+          city: '昆明',
+          telephone: '15510000003'
+        }
+      ],
+      rowGroup: { field: 'province', colspan: 2 }
+    }
+  }
+}
+</script>
+
+<style>
+.grid-grouping .tiny-badge {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  line-height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #f5222d;
+  border-radius: 50%;
+}
+</style>

package/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="grid-grouping">
-    <tiny-grid height="800px" setting :row-group="renderOp" :data="data">
+    <tiny-grid height="320px" setting :row-group="renderOp" :data="data">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -14,7 +14,7 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
 
 const data = ref([
   {
@@ -134,5 +134,6 @@ const renderOp = ref({
   text-align: center;
   background-color: #f5222d;
   border-radius: 50%;
+  margin-left: 4px;
 }
 </style>

package/demos/pc/app/grid/row-grouping/row-grouping.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="grid-grouping">
-    <tiny-grid height="800px" setting :row-group="renderOp" :data="data">
+    <tiny-grid height="320px" setting :row-group="renderOp" :data="data">
       <tiny-grid-column type="index" width="60"></tiny-grid-column>
       <tiny-grid-column type="selection" width="60"></tiny-grid-column>
       <tiny-grid-column field="area" title="区域" sortable></tiny-grid-column>
@@ -144,5 +144,6 @@ export default {
   text-align: center;
   background-color: #f5222d;
   border-radius: 50%;
+  margin-left: 4px;
 }
 </style>

package/demos/pc/app/grid/slot/editor-slot-composition-api.vue

@@ -7,6 +7,14 @@
           <tiny-input v-model="data.row.name" placeholder="请输入内容"></tiny-input>
         </template>
       </tiny-grid-column>
+      <tiny-grid-column field="date" title="下班时间" :editor="{}">
+        <template #edit="data">
+          <tiny-time-picker v-model="data.row.date" @change="change"></tiny-time-picker>
+        </template>
+        <template #default="data">
+          {{ data.row.date.toTimeString().substr(0, 8) }}
+        </template>
+      </tiny-grid-column>
       <tiny-grid-column field="employees" title="员工人数"></tiny-grid-column>
       <tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
       <tiny-grid-column field="address" title="地址"></tiny-grid-column>
@@ -17,7 +25,17 @@
 
 <script setup>
 import { ref } from 'vue'
-import { Grid as TinyGrid, GridColumn as TinyGridColumn, Input as TinyInput } from '@opentiny/vue'
+import {
+  Grid as TinyGrid,
+  GridColumn as TinyGridColumn,
+  Input as TinyInput,
+  TimePicker as TinyTimePicker,
+  Modal
+} from '@opentiny/vue'
+
+function change() {
+  Modal.message({ message: '下班时间编辑完成', status: 'info' })
+}
 
 const tableData = ref([
   {
@@ -26,7 +44,7 @@ const tableData = ref([
     area: '华东区',
     address: '福州',
     employees: 423,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '2',
@@ -34,7 +52,7 @@ const tableData = ref([
     area: '华南区',
     address: '深圳福田区',
     employees: 363,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '3',
@@ -42,7 +60,7 @@ const tableData = ref([
     area: '华南区',
     address: '中山市',
     employees: 131,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '4',
@@ -50,7 +68,7 @@ const tableData = ref([
     area: '华北区',
     address: '梅州',
     employees: 215,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '5',
@@ -58,7 +76,7 @@ const tableData = ref([
     area: '华南区',
     address: '韶关',
     employees: 322,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   },
   {
     id: '6',
@@ -66,7 +84,7 @@ const tableData = ref([
     area: '华北区',
     address: '广州天河区',
     employees: 168,
-    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+    date: new Date(2016, 9, 10, 17, 0)
   }
 ])
 </script>