uni-app：实现分页功能，单击行获取此行指定数据，更改行样式
效果：
分段解析代码
分页功能实现：
一、标签
1、搜索栏-模糊查询
为表单信息，@submit = "search_wip_name"表单提交的方法
name="wip_entity_name"设置name的值，方便js端获取数据
，设置form-type="submit"，绑定表单的提交按钮
2、表格信息
工单名称
料号
料号名称
规格型号
预计开工日
开工量
{{item.wip_entity_name}}
{{item.primary_item}}
{{item.item_name}}
{{item.item_desc}}
{{item.plan_start_date}}
{{item.start_quantity}}
scroll-view实现可滚动的视图区域。在这个代码中，scroll-view组件被用来实现横向滚动的效果，即可以水平滚动。
scroll-x="true"：设置scroll-view组件为横向滚动模式。
style="overflow-x: scroll; white-space: nowrap;"：添加样式，设置横向滚动条可见，并且内容不换行。v-for="(item, index) in dataList" :key="index"：通过
v-for指令，遍历dataList数组生成多个行，每一行对应数组中的一个数据项。:key="index"用于指定每个行的唯一标识。
:class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }"：当item.selectedIndex和index相等时，为当前行添加selected样式类；当item.selectedRow为真时，为当前行添加selected-row样式类。（这里是为了实现单击获取数据的代码，以及单击行样式改变的代码）
3、分页实现
<
{{ currentPage }} /{{ totalPage }}
>
：这是一个显示上一页按钮的视图元素。<
:class="{ 'first-page': isFirstPage }"绑定的类名条件判断，如果当前页码为第一页，则添加first-page类名，可以用于自定义样式。根据isFirstPage变量的值来判断是否添加first-page类名。当isFirstPage的值为true时，会添加class="first-page"。:disabled="currentPage === 1"通过判断当前页码是否为1来决定按钮是否可点击，从而达到禁用按钮的效果。这句话表示当currentPage的值===1时，disabled="true"那么就被禁用，反之则反@click="prevPage"绑定了点击事件，当点击按钮时会执行prevPage方法。
：使用两个{{ currentPage }} /{{ totalPage }} 标签来分别显示当前页码和总页数。
{{ currentPage }}是一个插值表达式，用于渲染当前页码。
{{ totalPage }}同样是一个插值表达式，用于渲染总页数。通过设置style属性来给文本设置样式，如颜色。
：这是一个显示下一页按钮的视图元素，与上一页按钮类似。>
:class="{ 'last-page': isLastPage }"绑定的类名条件判断，如果当前页码为最后一页，则添加last-page类名，可以用于自定义样式。
:disabled="currentPage === totalPage"通过判断当前页码是否等于总页数来决定按钮是否可点击，从而达到禁用按钮的效果。
@click="nextPage"绑定了点击事件，当点击按钮时会执行nextPage方法。
二、JS
1、变量设置
data() {
return {
dataList: [],//查询出的数据
currentPage: 1,//当前页码
pageSize: 10,//每页显示数量
totalPage: 0,//总页数默认值
selectedIndex: -1,//selectedIndex 默认为 -1 是为了表示列表项未被选中的状态。
isFirstPage: '',//是否是第一页
isLastPage: '',//是否是最后一页
selectedRow: '',//选择行
wip_entity_name: '',//工单（模糊查询使用）
ItemNo: '',//料号
ItemName: '',//料号名称
};
},2、 自动计算当前页信息
computed: {
getCurrentPageData() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.dataList.slice(startIndex, endIndex);
}
},
computed是 vue.js框架提供的一个计算属性特性。使用computed可以在 Vue 组件中定义一些根据数据的变化而自动计算得出的属性。在给定的代码中，
getCurrentPageData就是一个计算属性。它依赖于currentPage和pageSize这两个数据属性，当这两个属性发生变化时，getCurrentPageData会自动重新计算并返回当前页的数据。
getCurrentPageData是一个计算属性的名称。- 计算属性的定义由使用
computed关键字开始。- 计算属性里的代码逻辑会在相关的响应式依赖发生变化时自动执行。
const startIndex = (this.currentPage - 1) * this.pageSize;：计算当前页的起始索引，使用了currentPage和pageSize这两个响应式数据。
currentPage表示当前所在的页数。pageSize表示每页显示的数据条数。- 起始索引计算公式为
(当前页数 - 1) * 每页数据条数。const endIndex = startIndex + this.pageSize;：计算当前页的结束索引。
- 结束索引计算公式为
起始索引 + 每页数据条数。return this.dataList.slice(startIndex, endIndex);：根据起始索引和结束索引，使用slice()方法从dataList数组中截取出当前页的数据，并将其作为计算属性的返回值。
3、点击搜索按钮获取模糊查询的值
//模糊查询
search_wip_name(e) {
this.wip_entity_name = e.detail.value.wip_entity_name //工单号
this.ItemNo = e.detail.value.ItemNo //料号
this.ItemName = e.detail.value.ItemName //料号名称
this.getData(1); // 调用getData方法重新获取数据
},4、选择行功能
//选择行
selectRow(index, wipEntityName) {
const selectedItem = this.dataList[index];
if (selectedItem.selectedIndex === index && selectedItem.selectedRow) {
// 取消选中状态并清空wip_entity_name的值
this.dataList = this.dataList.map(item => ({
...item,
selectedIndex: -1,
selectedRow: false
}));
this.wip_entity_name = '';
} else {
// 选中当前行并获取wip_entity_name的值
this.dataList = this.dataList.map((item, i) => ({
...item,
selectedIndex: i === index ? index : -1,
selectedRow: i === index ? !item.selectedRow : false
}));
this.wip_entity_name = wipEntityName;
}
},selectRow(index, wipEntityName)方法接受两个参数
index和wipEntityName，分别表示被选中行的索引和对应的 wip_entity_name 属性值。
const selectedItem = this.dataList[index];：根据索引获取被选中的行的数据项对象，存储在selectedItem变量中。
if (selectedItem.selectedIndex === index && selectedItem.selectedRow) { ... }：判断当前被选中的行是否已经处于选中状态。
- 如果是，表示用户要取消选中该行，进入
if代码块内部。- 否则，表示用户要选中该行，进入
else代码块内部。如果进入了
else代码块：this.dataList = this.dataList.map(item => ({
...item,
selectedIndex: -1,
selectedRow: false
}));this.wip_entity_name = '';
- 使用
map()方法遍历dataList数组，将每一行的selectedIndex设置为 -1（表示未选中），selectedRow设置为 false（表示非选中状态）。- 将更新后的
dataList赋值回原来的dataList数组，以更新数据。- 将
wip_entity_name属性设置为空字符串，清空其值。如果进入了
else代码块：// 选中当前行并获取wip_entity_name的值
this.dataList = this.dataList.map((item, i) => ({
...item,
selectedIndex: i === index ? index : -1,
selectedRow: i === index ? !item.selectedRow : false
}));
this.wip_entity_name = wipEntityName;
- 使用
map()方法遍历dataList数组，将每一行的selectedIndex设置为当前行的索引（表示选中的行），selectedRow设置为 true（表示选中状态）。- 将更新后的
dataList赋值回原来的dataList数组，以更新数据。- 将
wip_entity_name属性设置为参数wipEntityName的值，即被选中行对应的 wip_entity_name 值。
5、 上一页，下一页功能实现
//上一页
prevPage() {
if (this.currentPage > 1) {
this.currentPage--;
this.getData(this.currentPage); // 调用getData方法获取上一页数据
}
},
//下一页
nextPage() {
if (this.currentPage < this.totalPage) {
this.currentPage++;
this.getData(this.currentPage); // 调用getData方法获取下一页数据
}
},
prevPage是一个方法的名称，用于获取上一页的数据。
if (this.currentPage > 1)确保当前页码大于 1，即当前不是第一页。如果满足条件，则执行以下操作：
- 将当前页码
currentPage减一，即跳转到上一页。- 调用
getData方法，并传入更新后的currentPage作为参数，获取上一页的数据。
nextPage是一个方法的名称，用于获取下一页的数据。
if (this.currentPage < this.totalPage)确保当前页码小于总页数，即当前不是最后一页。
- 将当前页码
currentPage加一，即跳转到下一页。- 调用
getData方法，并传入更新后的currentPage作为参数，获取下一页的数据。
6、获取数据
前端代码
//获取数据
getData(page) {
uni.request({
url: getApp().globalData.position + 'Produce/search_wip_name',
data: {
page: page,
pageSize: this.pageSize,
wip_entity_name: this.wip_entity_name, // 添加工单号参数
ItemNo: this.ItemNo, // 添加料号参数
ItemName: this.ItemName, // 添加料号名称参数
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType: 'json',
success: res => {
// this.dataList = res.data.info;
this.dataList = res.data.info.map(item => ({
...item,
selectedIndex: -1,
selectedRow: false
}));
this.totalPage = Math.ceil(parseInt(res.data.total) / this.pageSize);
this.currentPage = page;
// 更新 isFirstPage 和 isLastPage 的值
this.isFirstPage = (page === 1);
this.isLastPage = (page === this.totalPage);
},
fail(res) {
console.log("查询失败");
}
});
}
},使用
uni.request方法发送请求，传入以下参数：
url：请求的地址，getApp().globalData.position + 'Produce/search_wip_name'表示全局数据中的position属性值拼接上'Produce/search_wip_name'。data：请求的参数对象，包括page、pageSize、wip_entity_name、ItemNo和ItemNameheader：请求头信息，设置"Content-Type": "application/x-www-form-urlencoded"。method：请求方法，设置为'POST'，表示使用 POST 方法发送请求。dataType：响应的数据类型，设置为'json'，表示期望返回 JSON 格式的数据。success：请求成功时的回调函数，执行操作：
- 将响应数据
res.data.info赋值给this.dataList（设置页面需要展示的数据），并通过map()方法给每个数据项添加属性selectedIndex和selectedRow，并初始化为-1和false。- 根据总数据量
res.data.total和每页显示数量this.pageSize计算出总页数，并赋值给this.totalPage。- 将当前页码
page赋值给this.currentPage。- 更新
this.isFirstPage和this.isLastPage的值，根据当前页码和总页数判断是否为第一页或最后一页。fail：请求失败时的回调函数，打印出"查询失败"
后端代码（thinkphp）
public function search_wip_name()
{
//从前端传入当前页码和每页总数
$page = input('post.page', 1); // 当前页码，默认为1
$pageSize = input('post.pageSize', 10); // 每页显示的数据条数，默认为10
//从前端传入模糊查询的条件
$wip_entity_name = input('post.wip_entity_name', '');
$ItemNo = input('post.ItemNo', '');
$ItemName = input('post.ItemName', '');
//进行数据库查询
$data['info'] = Db::table('wip_jobs_all')
->alias('a')
->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
->field('a.plan_start_date, a.start_quantity, a.wip_entity_name, a.quantity_completed, a.primary_item, b.item_desc, b.item_name, a.creation_date')
->where([
'a.status_type' => ['<>', '关闭'],
'a.wip_entity_name' => ['not in', function ($query) {
$query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
}]
])
//模糊查询条件
->where([
'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
'a.primary_item' => ['like', '%' . $ItemNo . '%'],
'b.item_name' => ['like', '%' . $ItemName . '%'],
])
->order('a.wip_entity_name DESC')
//加入页码和每页数量的限制
->limit(($page - 1) * $pageSize, $pageSize)
->select();
// 格式化时间
foreach ($data['info'] as &$item) {
$item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);
}
//计算查询总数
$total = Db::table('wip_jobs_all')
->alias('a')
->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
->where([
'a.status_type' => ['<>', '关闭'],
'a.wip_entity_name' => ['not in', function ($query) {
$query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
}]
])
->where([
'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
'a.primary_item' => ['like', '%' . $ItemNo . '%'],
'b.item_name' => ['like', '%' . $ItemName . '%'],
])
->count();
$data['total'] = strval($total); // 将总数转换为字符串类型
//输出数据
echo json_encode($data);
}7、 组件已经被挂载到 DOM 中
mounted() {
this.getData(1);
}
mounted："组件已经被挂载到 DOM 中" 表示 Vue 组件的实例已经被创建并成功插入到了页面的 DOM 结构中，此时组件的模板内容已经被渲染到页面上。在
mounted钩子函数中，调用了getData方法，并传入参数1。具体解析如下：
mounted是一个生命周期钩子函数，表示组件已经被挂载到 DOM 中。- 在该函数中，调用了
this.getData(1)，即调用了名为getData的方法，并传入参数1。- 这表示在组件挂载后，会立即调用
getData方法，参数为1，以获取第一页的数据。- 通过这段代码，在组件加载完毕后将立即执行获取数据的操作，获取第一页的数据并进行展示
完整代码
前端
工单名称
料号
料号名称
规格型号
预计开工日
开工量
{{item.wip_entity_name}}
{{item.primary_item}}
{{item.item_name}}
{{item.item_desc}}
{{item.plan_start_date}}
{{item.start_quantity}}
<
{{ currentPage }} /{{ totalPage }}
>
后端
//模糊查询工单
public function search_wip_name()
{
//获取前台传来的页码和每页显示数
$page = input('post.page', 1); // 当前页码，默认为1
$pageSize = input('post.pageSize', 10); // 每页显示的数据条数，默认为10
//获取模糊查询的条件
$wip_entity_name = input('post.wip_entity_name', '');//工单
$ItemNo = input('post.ItemNo', '');//料号
$ItemName = input('post.ItemName', ''); //料号名称
//查询数据，代入分页的限制条件->limit(($page - 1) * $pageSize, $pageSize)
$data['info'] = Db::table('wip_jobs_all')
->alias('a')
->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
->field('a.plan_start_date, a.start_quantity, a.wip_entity_name, a.quantity_completed, a.primary_item, b.item_desc, b.item_name, a.creation_date')
->where([
'a.status_type' => ['<>', '关闭'],
'a.wip_entity_name' => ['not in', function ($query) {
$query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
}]
])
->where([
'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
'a.primary_item' => ['like', '%' . $ItemNo . '%'],
'b.item_name' => ['like', '%' . $ItemName . '%'],
])
->order('a.wip_entity_name DESC')
->limit(($page - 1) * $pageSize, $pageSize)
->select();
// 格式化时间
foreach ($data['info'] as &$item) {
$item['creation_date'] = date('Y-m-d H:i:s', $item['creation_date']);
}
//计算总条数
$total = Db::table('wip_jobs_all')
->alias('a')
->join(['sf_item_no' => 'b'], 'a.primary_item=b.item_no')
->where([
'a.status_type' => ['<>', '关闭'],
'a.wip_entity_name' => ['not in', function ($query) {
$query->table('wip_material_requierments')->where('quantity_issued', '>', 0)->field('wip_entity_name');
}]
])
->where([
'a.wip_entity_name' => ['like', '%' . $wip_entity_name . '%'],
'a.primary_item' => ['like', '%' . $ItemNo . '%'],
'b.item_name' => ['like', '%' . $ItemName . '%'],
])
->count();
$data['total'] = strval($total); // 将总数转换为字符串类型
//输出数据
echo json_encode($data);
}