代码拉取完成，页面将自动刷新
vue-mobile-table是一个移动端使用的轻量级table展示组件（目前对增删改并不支持，主要针对类似股票软件中查看行情的table展示列表的业务场景），组件内部布局主要采用flex布局，并未使用table标签。内部在滚动上使用BetterScroll 2.0中的transform来处理滚动，使得滚动更加细腻。在dom渲染上采用虚拟dom技术，让vue-mobile-table很好的保证不卡顿的前提下渲染一个超长的列表。并且vue-mobile-table支持上拉加载和下拉刷新，更加方便做多样的ajax请求。该组件高度默认为父组件高度，且表头固定（可通过设置父组件高度来控制该组建的高度）。
该组件样式主要使用flex布局，和fit-content，并无其他非常规css样式
npm install vue-mobile-table --save
import vueMobileTable from from 'vue-mobile-table'
Vue.use(vueMobileTable)
<template>
<div
style="height: 100%; width: 100%; overflow: hidden; box-sizing: border-box"
>
<vue-mobile-table :dataSource="tableData" :requestData="requestData">
<table-column
prop="index"
fixed
label="序号"
sortable
></table-column>
<table-column
prop="name"
label="名称"
min-width="120"
align="right"
></table-column>
<table-column prop="text" label="文本" min-width="120"></table-column>
<table-column prop="age" label="年龄" min-width="120"></table-column>
</vue-mobile-table>
</div>
</template>
<script>
export default {
name: "testPage",
data() {
return {
tableData: [],
};
},
methods: {
requestData(isFresh) {
// alert(12)
return new Promise((reslove) => {
if (isFresh) {
setTimeout(() => {
reslove(true);
}, 2000);
} else {
setTimeout(() => {
for (let index = 0; index < 100; index++) {
this.tableData.push({
index: index,
age: index,
text: "我是一段文字，我很长，不要换行",
name: "姓名" + index + "号",
});
}
reslove(true);
}, 2000);
}
});
},
},
created() {
let data = [];
for (let index = 0; index < 100; index++) {
data.push({
index: index,
age: index,
text: "我是一段文字，我很长，不要换行",
name: "姓名" + index + "号",
});
}
this.tableData = data;
// console.log(this.tableData);
},
};
</script>
<style></style>
示例视频demo
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手