简书链接:uniapptable加载大数据卡死以及解决宽度不够又不能右边滑动问题
文章字数：183,阅读全文大约需要1分钟
vue-easytable
每一列只有一个文字宽度问题解决
经过分析发现table-layout:为fixed
暴力提权覆盖样式
另外还要设置td th的文字都禁止换行

1
2
3
4
5
6
7
8
9
10
11
12
13

table {
	 width: 100%;
	 table-layout: auto  !important;
	border-collapse: collapse !important;
}

td {
	white-space: nowrap !important;
}
th{
		white-space: nowrap !important;
}

大数据问题

1
2
3
4
5
6
7
8
9
10
<lozn-table 

:columns="columns" :table-data="rows" :scroll-width="0" :virtual-scroll-option="{enable:true}"
	:max-height="500" row-key-field-name="rowKey"
	    :border-around="true"
	         :border-x="true"
	         :border-y="true"
		
	 
	 />

xx

感觉还是有点慢，在浏览器等了几秒能加载出来，但是感觉还是慢， 但是不至于直接无响应，
相关文档
https://happy-coding-clans.github.io/vue-easytable/#/
https://github.com/fall-zhang/vue-fantable

另外再移动端用不了这个fanttable
所以用宏定义封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<template>
	<block v-if="H5">
		
		<fan-table style="height: 100%;"  fixed-header :columns="columns" :table-data="rows"
			row-key-field-name="rowKey" :border-around="true" :border-x="true" :border-y="true"
			:style="{'table-layout':'auto','word-break':'normal'}" />
			
<!-- 		
		<fan-table style="height: 100%;"  fixed-header :columns="columns" :table-data="rows" :virtual-scroll-option="{enable:true}"
			:max-height="600" row-key-field-name="rowKey" :border-around="true" :border-x="true" :border-y="true"
			:style="{'table-layout':'auto','word-break':'normal'}" />
			 -->


	</block>
	<block v-else>
		<uni-table ref="table" border emptyText="暂无数据" sortable="true" class="tablestyle">
			<uni-tr>
				<block :data-index="index" :data-item="bean" v-for="(bean, index) in columns" :key="index">
					<uni-th align="center">{{bean.title}}</uni-th>
				</block>
			</uni-tr>
			<uni-tr v-for="(item, index) in rows" :key="index">
				<block :data-index="index" :data-item="bean" v-for="(bean, index) in columns" :key="index">
					<uni-td style="text-align: center;">
						<view class="name">{{ item[bean.title] }}</view>
					</uni-td>
				</block>
			</uni-tr>
		</uni-table>
	</block>

</template>

<script>
	export default {

		name: "smarttable",
		data() {
			return {
			H5:
			// #ifdef H5
				true
			// #endif
			// #ifndef H5
			false
			// #endif

			}
		},
		props: {
			rows: {
				type: Array,
				default: () => []
			},
			columns: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style>

</style>