vue-easytable
每一列只有一个文字宽度问题解决
经过分析发现table-layout
:为fixed
暴力提权覆盖样式
另外还要设置td th的文字都禁止换行
table {
width: 100%;
table-layout: auto !important;
border-collapse: collapse !important;
}
td {
white-space: nowrap !important;
}
th{
white-space: nowrap !important;
}
大数据问题
<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
所以用宏定义封装
<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>
网友评论