tiny-vue/examples/sites/demos/pc/app/grid/operation-column/dropdown.vue

96 lines
3.4 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<tiny-grid ref="grid" :data="tableData">
<tiny-grid-column type="index" width="60"></tiny-grid-column>
<tiny-grid-column type="selection" width="80">
<template #dropdown>
<tiny-dropdown title="" @item-click="itemClick">
<template #dropdown>
<tiny-dropdown-menu placement="top">
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
<tiny-dropdown-item :item-data="{ name: 'selectAllPage' }"> 选择全部数据 </tiny-dropdown-item>
<tiny-dropdown-item :item-data="{ name: 'clearCurPage' }"> 取消选择 </tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>
</template>
</tiny-grid-column>
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
<tiny-grid-column field="area" title="所属区域"></tiny-grid-column>
<tiny-grid-column field="address" title="地址"></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
</tiny-grid>
</template>
<script>
import { Grid, GridColumn, Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
export default {
components: {
TinyGrid: Grid,
TinyGridColumn: GridColumn,
TinyDropdown: Dropdown,
TinyDropdownMenu: DropdownMenu,
TinyDropdownItem: DropdownItem
},
data() {
return {
tableData: [
{
id: '1',
name: 'GFD科技有限公司',
area: '华东区',
address: '福州',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
},
{
id: '2',
name: 'WWWW科技有限公司',
area: '华南区',
address: '深圳福田区',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
},
{
id: '3',
name: 'RFV有限责任公司',
area: '华南区',
address: '中山市',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
},
{
id: '4',
name: 'TGB有限公司',
area: '华北区',
address: '梅州',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
},
{
id: '5',
name: 'YHN科技有限公司',
area: '华南区',
address: '韶关',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
},
{
id: '6',
name: '康康物业有限公司',
area: '华北区',
address: '广州天河区',
introduction: '公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
}
]
}
},
methods: {
itemClick({ itemData }) {
if (itemData.name === 'selectCurPage') {
this.$refs.grid.setAllSelection(true)
}
if (itemData.name === 'clearCurPage') {
this.$refs.grid.setAllSelection(false)
}
}
}
}
</script>