@opentiny/vue-docs 2.2.19 → 2.2.21

package/demos/pc/app/grid/fixed/group-header-fixed-composition-api.vue

@@ -0,0 +1,212 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    resizable
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    height="300"
+  >
+    <tiny-grid-column title="操作" header-align="center">
+      <tiny-grid-column title="分组1" header-align="center" fixed="left">
+        <tiny-grid-column type="index" width="40"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column title="分组2" header-align="center">
+        <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+      <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        :title="renderHeaderArea"
+        :editor="{ component: 'select', options }"
+        sortable
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderRelation" header-align="center">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="600"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="150"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="150"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx" setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn } from '@opentiny/vue'
+import {
+  iconAdministrator,
+  iconVersiontree,
+  iconMarkOn,
+  iconUser,
+  iconAssociation,
+  iconHelpful
+} from '@opentiny/vue-icon'
+
+const TinyIconVersiontree = iconVersiontree()
+const TinyIconAdministrator = iconAdministrator()
+const TinyIconMarkOn = iconMarkOn()
+const TinyIconUser = iconUser()
+const TinyIconAssociation = iconAssociation()
+const TinyIconHelpful = iconHelpful()
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技YX公司',
+    area: '华东区',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '2',
+    name: 'WWWW科技YX公司',
+    area: '华南区',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    area: '华南区',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '4',
+    name: 'TGBYX公司',
+    area: '华北区',
+    address: '梅州',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '5',
+    name: 'YHN科技YX公司',
+    area: '华南区',
+    address: '韶关',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '6',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '7',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '8',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '9',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '10',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  },
+  {
+    id: '11',
+    name: '康康物业YX公司',
+    area: '华北区',
+    address: '广州天河区',
+    introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+  }
+])
+const options = ref([
+  { label: '华北区', value: '华北区' },
+  { label: '华东区', value: '华东区' },
+  { label: '华南区', value: '华南区' }
+])
+
+function renderHeaderDescription(h) {
+  return (
+    <span>
+      {' '}
+      <TinyIconAdministrator />
+      Description
+    </span>
+  )
+}
+function renderHeaderRelation(h) {
+  return (
+    <span>
+      <TinyIconVersiontree />
+    </span>
+  )
+}
+
+function renderHeaderArea(h) {
+  return (
+    <span>
+      <TinyIconMarkOn />
+      Description
+    </span>
+  )
+}
+
+function renderHeaderAddress(h) {
+  return (
+    <span>
+      <TinyIconUser />
+      Description
+    </span>
+  )
+}
+
+function rendererCellOperate(h) {
+  return (
+    <div style="text-align: center; font-size: 16px;">
+      <TinyIconHelpful />
+      &nbsp;&nbsp;
+      <TinyIconAssociation />
+    </div>
+  )
+}
+</script>

package/demos/pc/app/grid/fixed/group-header-fixed.vue

@@ -0,0 +1,232 @@
+<template>
+  <tiny-grid
+    :data="tableData"
+    resizable
+    :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
+    height="300"
+  >
+    <tiny-grid-column title="操作" header-align="center">
+      <tiny-grid-column title="分组1" header-align="center" fixed="left">
+        <tiny-grid-column type="index" width="40"></tiny-grid-column>
+        <tiny-grid-column type="selection" width="40"></tiny-grid-column>
+      </tiny-grid-column>
+      <tiny-grid-column title="分组2" header-align="center">
+        <tiny-grid-column :renderer="rendererCellOperate" width="100"></tiny-grid-column>
+      </tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderDescription" header-align="center">
+      <tiny-grid-column field="name" title="名称" show-tip sortable width="600"></tiny-grid-column>
+      <tiny-grid-column
+        field="area"
+        :title="renderHeaderArea"
+        :editor="{ component: 'select', options }"
+        sortable
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column :title="renderHeaderRelation" header-align="center">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="600"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="600"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+    <tiny-grid-column title="右冻结分组" header-align="center" fixed="right">
+      <tiny-grid-column
+        field="address"
+        :title="renderHeaderAddress"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        width="150"
+      ></tiny-grid-column>
+      <tiny-grid-column
+        field="introduction"
+        title="公司简介"
+        :editor="{ component: 'input', autoselect: true }"
+        sortable
+        show-overflow="title"
+        width="150"
+      ></tiny-grid-column>
+    </tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script lang="jsx">
+import { Grid, GridColumn } from '@opentiny/vue'
+import {
+  IconAdministrator,
+  IconVersiontree,
+  IconMarkOn,
+  IconUser,
+  IconAssociation,
+  IconHelpful
+} from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyGrid: Grid,
+    TinyGridColumn: GridColumn
+  },
+  data() {
+    return {
+      IconVersiontree: IconVersiontree(),
+      IconAdministrator: IconAdministrator(),
+      IconMarkOn: IconMarkOn(),
+      IconUser: IconUser(),
+      IconAssociation: IconAssociation(),
+      IconHelpful: IconHelpful(),
+      tableData: [
+        {
+          id: '1',
+          name: 'GFD科技YX公司',
+          area: '华东区',
+          address: '福州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '2',
+          name: 'WWWW科技YX公司',
+          area: '华南区',
+          address: '深圳福田区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '3',
+          name: 'RFV有限责任公司',
+          area: '华南区',
+          address: '中山市',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '4',
+          name: 'TGBYX公司',
+          area: '华北区',
+          address: '梅州',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '5',
+          name: 'YHN科技YX公司',
+          area: '华南区',
+          address: '韶关',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '6',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '7',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '8',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '9',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '10',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        },
+        {
+          id: '11',
+          name: '康康物业YX公司',
+          area: '华北区',
+          address: '广州天河区',
+          introduction: '公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
+        }
+      ],
+      options: [
+        { label: '华北区', value: '华北区' },
+        { label: '华东区', value: '华东区' },
+        { label: '华南区', value: '华南区' }
+      ]
+    }
+  },
+  methods: {
+    renderHeaderDescription(h) {
+      const IconAdministrator = this.IconAdministrator
+
+      return (
+        <span>
+          {' '}
+          <IconAdministrator />
+          Description
+        </span>
+      )
+    },
+    renderHeaderRelation(h) {
+      const IconVersiontree = this.IconVersiontree
+
+      return (
+        <span>
+          <IconVersiontree />
+        </span>
+      )
+    },
+
+    renderHeaderArea(h) {
+      const IconMarkOn = this.IconMarkOn
+
+      return (
+        <span>
+          <IconMarkOn />
+          Description
+        </span>
+      )
+    },
+
+    renderHeaderAddress(h) {
+      const IconUser = this.IconUser
+
+      return (
+        <span>
+          <IconUser />
+          Description
+        </span>
+      )
+    },
+
+    rendererCellOperate(h) {
+      const IconAssociation = this.IconAssociation
+      const IconHelpful = this.IconHelpful
+
+      return (
+        <div style="text-align: center; font-size: 16px;">
+          <IconHelpful />
+          &nbsp;&nbsp;
+          <IconAssociation />
+        </div>
+      )
+    }
+  }
+}
+</script>

package/demos/pc/app/grid/large-data/column-anchor-clear-active-composition-api.vue

@@ -0,0 +1,190 @@
+<template>
+  <tiny-grid
+    column-min-width="100"
+    auto-resize
+    :column-anchor="columnAnchor"
+    :optimization="{ scrollX: { gt: 20 } }"
+    :fetch-data="fetchData"
+    :pager="pagerConfig"
+  >
+    <tiny-grid-column field="name0" title="名称0" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name1" title="名称1" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name2" title="名称2" sortable fixed="left"></tiny-grid-column>
+    <tiny-grid-column field="name3" title="名称3" sortable></tiny-grid-column>
+    <tiny-grid-column field="name4" title="名称4" sortable></tiny-grid-column>
+    <tiny-grid-column field="name5" title="名称5" sortable></tiny-grid-column>
+    <tiny-grid-column field="name6" title="名称6" sortable></tiny-grid-column>
+    <tiny-grid-column field="name7" title="名称7" sortable></tiny-grid-column>
+    <tiny-grid-column field="name8" title="名称8" sortable></tiny-grid-column>
+    <tiny-grid-column field="name9" title="名称9" sortable></tiny-grid-column>
+    <tiny-grid-column field="name10" title="名称10" sortable></tiny-grid-column>
+    <tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
+    <tiny-grid-column field="name11" title="名称11" sortable></tiny-grid-column>
+    <tiny-grid-column field="name12" title="名称12" sortable></tiny-grid-column>
+    <tiny-grid-column field="name13" title="名称13" sortable></tiny-grid-column>
+    <tiny-grid-column field="name14" title="名称14" sortable></tiny-grid-column>
+    <tiny-grid-column field="name15" title="名称15" sortable></tiny-grid-column>
+    <tiny-grid-column field="name16" title="名称16" sortable></tiny-grid-column>
+    <tiny-grid-column field="name17" title="名称17" sortable></tiny-grid-column>
+    <tiny-grid-column field="name18" title="名称18" sortable></tiny-grid-column>
+    <tiny-grid-column field="name19" title="名称19" sortable></tiny-grid-column>
+    <tiny-grid-column field="name20" title="名称20" sortable></tiny-grid-column>
+    <tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
+    <tiny-grid-column field="name21" title="名称21" sortable></tiny-grid-column>
+    <tiny-grid-column field="name22" title="名称22" sortable></tiny-grid-column>
+    <tiny-grid-column field="name23" title="名称23" sortable></tiny-grid-column>
+    <tiny-grid-column field="name24" title="名称24" sortable></tiny-grid-column>
+    <tiny-grid-column field="name25" title="名称25" sortable></tiny-grid-column>
+    <tiny-grid-column field="name26" title="名称26" sortable></tiny-grid-column>
+    <tiny-grid-column field="name27" title="名称27" sortable></tiny-grid-column>
+    <tiny-grid-column field="name28" title="名称28" sortable></tiny-grid-column>
+    <tiny-grid-column field="name29" title="名称29" sortable></tiny-grid-column>
+    <tiny-grid-column field="name30" title="名称30" sortable></tiny-grid-column>
+    <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+    <tiny-grid-column field="name31" title="名称31" sortable></tiny-grid-column>
+    <tiny-grid-column field="name32" title="名称32" sortable></tiny-grid-column>
+    <tiny-grid-column field="name33" title="名称33" sortable></tiny-grid-column>
+    <tiny-grid-column field="name34" title="名称34" sortable></tiny-grid-column>
+    <tiny-grid-column field="name35" title="名称35" sortable></tiny-grid-column>
+    <tiny-grid-column field="name36" title="名称36" sortable></tiny-grid-column>
+    <tiny-grid-column field="name37" title="名称37" sortable></tiny-grid-column>
+    <tiny-grid-column field="name38" title="名称38" sortable></tiny-grid-column>
+    <tiny-grid-column field="name39" title="名称39" sortable></tiny-grid-column>
+    <tiny-grid-column field="name40" title="名称40" sortable></tiny-grid-column>
+    <tiny-grid-column field="name41" title="名称41" sortable></tiny-grid-column>
+    <tiny-grid-column field="name42" title="名称42" sortable></tiny-grid-column>
+    <tiny-grid-column field="name43" title="名称43" sortable></tiny-grid-column>
+    <tiny-grid-column field="name44" title="名称44" sortable></tiny-grid-column>
+    <tiny-grid-column field="name45" title="名称45" sortable></tiny-grid-column>
+    <tiny-grid-column field="name46" title="名称46" sortable></tiny-grid-column>
+    <tiny-grid-column field="name47" title="名称47" sortable></tiny-grid-column>
+    <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+    <tiny-grid-column field="name48" title="名称48" sortable fixed="right"></tiny-grid-column>
+    <tiny-grid-column field="name49" title="名称49" sortable fixed="right"></tiny-grid-column>
+  </tiny-grid>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Grid as TinyGrid, GridColumn as TinyGridColumn, Pager } from '@opentiny/vue'
+import { IconMarkOn } from '@opentiny/vue-icon'
+
+function getData({ page }) {
+  let curPage = page.currentPage
+  let pageSize = page.pageSize
+  let offset = (curPage - 1) * pageSize
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      let result = tableData.value.slice(0)
+      let total = tableData.value.length
+
+      result = result.slice(offset, offset + pageSize)
+
+      resolve({ result, page: { total } })
+    }, 300)
+  })
+}
+
+const tableData = ref([
+  {
+    id: '1',
+    name: 'GFD科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 800,
+    name0: '1-name-0',
+    name1: '1-name-1',
+    name2: '1-name-2'
+  },
+  {
+    id: '2',
+    name: 'WWW科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 300,
+    name0: '2-name-0',
+    name1: '2-name-1',
+    name2: '2-name-2'
+  },
+  {
+    id: '3',
+    name: 'RFV有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1300,
+    name0: '3-name-0',
+    name1: '3-name-1',
+    name2: '3-name-2'
+  },
+  {
+    id: '4',
+    name: 'JKL科技有限公司',
+    address: '福州',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1200,
+    name0: '4-name-0',
+    name1: '4-name-1',
+    name2: '4-name-2'
+  },
+  {
+    id: '5',
+    name: 'TGB科技有限公司',
+    address: '深圳福田区',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 1400,
+    name0: '5-name-0',
+    name1: '5-name-1',
+    name2: '5-name-2'
+  },
+  {
+    id: '6',
+    name: 'XDR有限责任公司',
+    address: '中山市',
+    introduction: '公司技术和研发实力雄厚',
+    employees: 900,
+    name0: '6-name-0',
+    name1: '6-name-1',
+    name2: '6-name-2'
+  }
+])
+
+const columnAnchor = ref([
+  'name',
+  ['introduction', '简单介绍'],
+  [
+    'employees',
+    [
+      '雇员数量-自定义渲染',
+      ({ h, anchor: { active, field, label }, action }) =>
+        h(
+          'div',
+          {
+            class: { 'tiny-grid__column-anchor-item': true, 'tiny-grid__column-anchor-item--active': active },
+            on: { click: (e) => action(field, e) }
+          },
+          [active ? h(IconMarkOn(), { class: 'tiny-grid__column-anchor-item-icon' }) : null, h('span', label)]
+        )
+    ]
+  ],
+  {
+    field: 'address', // 列锚点字段
+    label: null, // 列锚点名称
+    render: null, // 列锚点自定义渲染方法
+    active: true, // 是否默认激活
+    delay: 30 // 定位延时
+  }
+])
+
+const pagerConfig = ref({
+  component: Pager,
+  attrs: {
+    currentPage: 1,
+    pageSize: 3,
+    pageSizes: [3, 5, 10],
+    total: 0,
+    layout: 'total, prev, pager, next, jumper, sizes'
+  }
+})
+const fetchData = { api: getData }
+</script>