85 lines
4.1 KiB
Vue
85 lines
4.1 KiB
Vue
<template>
|
|
<div>
|
|
<div>
|
|
<tiny-button @click="changeFlag">{{ flag ? '隐藏' : '显示' }}最后一列</tiny-button>
|
|
</div>
|
|
<br />
|
|
<tiny-grid
|
|
ref="grid"
|
|
column-width="200"
|
|
:data="tableData"
|
|
:resizable="true"
|
|
:optimization="{ scrollX: { gt: 15, rSize: 20 } }"
|
|
@after-refresh-column="handleAfterRefresh"
|
|
>
|
|
<tiny-grid-column field="name" :title="(h) => h('div', '名称')"></tiny-grid-column>
|
|
<tiny-grid-column field="englishName" title="英文名"></tiny-grid-column>
|
|
<tiny-grid-column field="established" title="成立时间" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="listed" title="是否上市"></tiny-grid-column>
|
|
<tiny-grid-column field="ranking" title="国内排名" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="registeredCapital" title="注册资本" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="businessScope" title="业务范围"></tiny-grid-column>
|
|
<tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
|
<tiny-grid-column field="englishName" title="英文名"></tiny-grid-column>
|
|
<tiny-grid-column field="established" title="成立时间" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="listed" title="是否上市"></tiny-grid-column>
|
|
<tiny-grid-column field="ranking" title="国内排名" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="registeredCapital" title="注册资本" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="businessScope" title="业务范围"></tiny-grid-column>
|
|
<tiny-grid-column field="employees" title="员工数" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
|
|
<tiny-grid-column field="englishName" title="英文名"></tiny-grid-column>
|
|
<tiny-grid-column field="established" title="成立时间" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="listed" title="是否上市 1"></tiny-grid-column>
|
|
<tiny-grid-column field="ranking" title="国内排名 1" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="registeredCapital" title="注册资本1" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="businessScope" title="业务范围1"></tiny-grid-column>
|
|
<tiny-grid-column field="employees" title="员工数1" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="address" title="地址 1"></tiny-grid-column>
|
|
<tiny-grid-column field="englishName" title="英文名 2"></tiny-grid-column>
|
|
<tiny-grid-column field="established" title="成立时间 2" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="listed" title="是否上市 2"></tiny-grid-column>
|
|
<tiny-grid-column field="ranking" title="国内排名 2" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="registeredCapital" title="注册资本 2" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="businessScope" title="业务范围 2"></tiny-grid-column>
|
|
<tiny-grid-column field="employees" title="员工数 2" sortable></tiny-grid-column>
|
|
<tiny-grid-column field="address" title="地址 2"></tiny-grid-column>
|
|
<tiny-grid-column v-if="flag" field="introduction" title="公司简介（最后一列）" show-overflow></tiny-grid-column>
|
|
</tiny-grid>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { TinyGrid, TinyGridColumn, TinyButton } from '@opentiny/vue'
|
|
import { ref } from 'vue'
|
|
|
|
const flag = ref(false)
|
|
|
|
const tableData = ref([
|
|
{
|
|
id: '1',
|
|
name: 'GFD 科技有限公司',
|
|
address: '福州',
|
|
introduction: '公司技术和研发实力雄厚，是国家 863 项目的参与者，并被政府认定为“高新技术企业”。',
|
|
employees: 800,
|
|
englishName: 'GFD',
|
|
established: '2005',
|
|
listed: '是',
|
|
ranking: '23',
|
|
registeredCapital: '2000 万',
|
|
businessScope: '食品'
|
|
}
|
|
])
|
|
|
|
const grid = ref()
|
|
|
|
function changeFlag() {
|
|
flag.value = !flag.value
|
|
}
|
|
function handleAfterRefresh() {
|
|
const fullColumn = grid.value.getTableColumn().fullColumn
|
|
console.log(fullColumn[fullColumn.length - 1])
|
|
}
|
|
</script>
|