@unicom-blockchain/useful-tools
v1.5.0
Published
```vue <template> <el-table ref="tableRef" :data="tableData" style="width: 100%" border> <el-table-column prop="date" label="Date" width="180" /> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="address" label=
Downloads
5
Readme
生成excel用法
<template>
<el-table ref="tableRef" :data="tableData" style="width: 100%" border>
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useDownLoadExcel } from '@unicom-blockchain/useful-tools';
const tableRef = ref();
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
];
const { downloadExcelFile } = useDownLoadExcel(tableRef);
setTimeout(() => {
downloadExcelFile('test.xlsx', ['Address']);
}, 1000);
</script>
打印页面区域
<template>
<el-table ref="tableRef" :data="tableData" style="width: 50%" border>
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
<el-button @click="handlePrint">打印</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { printElement } from '@unicom-blockchain/useful-tools';
const src = ref();
const tableRef = ref();
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
];
const { downloadExcelFile } = useDownLoadExcel(tableRef);
async function handlePrint() {
const srcD = await printElement(tableRef, 'test', {
color: 'red',
width: '100vw',
height: '100wh',
});
src.value = srcD;
}
</script>
超长自动显示tooltip组件用法
<template>
<div style="display: flex; width: 100px">
<overflowTip content="你好你好你你好">你好你好你</overflowTip>
</div>
</template>
<script lang="ts" setup>
import { AutoOverflowTip } from '@unicom-blockchain/useful-tools';
</script>