uni-app：实现分页功能，单击行获取此行指定数据，更改行样式

效果：

分段解析代码

分页功能实现：

一、标签

1、搜索栏-模糊查询

<!-- 搜索框-->
		<form action="" @submit="search_wip_name">
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						工单名称:
					</view>
					<view class="search_right">
						<input name="wip_entity_name" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						料号:
					</view>
					<view class="search_right">
						<input name="ItemNo" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						名称:
					</view>
					<view class="search_right">
						<input name="ItemName" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="btn_position">
					<button class="button" form-type="submit">查询</button>
					<button class="button1">确认</button>
				</view>
			</view>
		</form>

<form action="" @submit="search_wip_name"> ：为表单信息，@submit = "search_wip_name"表单提交的方法

name="wip_entity_name"设置name的值，方便js端获取数据

<button class="button" form-type="submit">查询</button>，设置form-type="submit"，绑定表单的提交按钮

2、表格信息

<!-- 表格 -->
		<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;">
			<view class="table">
				<view class="table-tr">
					<view class="table-th1">工单名称</view>
					<view class="table-th1">料号</view>
					<view class="table-th1">料号名称</view>
					<view class="table-th1">规格型号</view>
					<view class="table-th1">预计开工日</view>
					<view class="table-th1">开工量</view>
				</view>
				<!-- :class="{ selected: selectedIndex === index,'selected-row':selectedRow ===index }" -->
				<view class="table-tr" v-for="(item, index) in dataList" :key="index"
					:class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }"
					@click="selectRow(index,item.wip_entity_name)">
					<view class="table-td1">{{item.wip_entity_name}}</view>
					<view class="table-td2">{{item.primary_item}}</view>
					<view class="table-td2">{{item.item_name}}</view>
					<view class="table-td2">{{item.item_desc}}</view>
					<view class="table-td2">{{item.plan_start_date}}</view>
					<view class="table-td2">{{item.start_quantity}}</view>
				</view>
			</view>
		</scroll-view>

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、分页实现

<!-- 分页 -->
<view class="pagination">
	<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1"
		@click="prevPage"><</view>
			<view class="now_page">
				<text style="color:#2979ff">{{ currentPage }} </text><text
					style="color:#4b4b4b">/{{ totalPage }}</text>
			</view>
			<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage"
				@click="nextPage">></view>
	</view>
</view>

<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1" @click="prevPage"><</view>：这是一个显示上一页按钮的视图元素。

: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方法。

<text style="color:#2979ff">{{ currentPage }} </text><text style="color:#4b4b4b">/{{ totalPage }}</text>：使用两个<text>标签来分别显示当前页码和总页数。

{{ currentPage }}是一个插值表达式，用于渲染当前页码。

{{ totalPage }}同样是一个插值表达式，用于渲染总页数。通过设置style属性来给文本设置样式，如颜色。

<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage" @click="nextPage">></view>：这是一个显示下一页按钮的视图元素，与上一页按钮类似。

: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 值。

//上一页
			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 和 ItemName
header：请求头信息，设置 "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，以获取第一页的数据。
通过这段代码，在组件加载完毕后将立即执行获取数据的操作，获取第一页的数据并进行展示

完整代码

前端

<template>
	<view>
		<!-- 搜索框-->
		<form action="" @submit="search_wip_name">
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						工单名称:
					</view>
					<view class="search_right">
						<input name="wip_entity_name" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						料号:
					</view>
					<view class="search_right">
						<input name="ItemNo" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="search">
					<view class="search_left">
						名称:
					</view>
					<view class="search_right">
						<input name="ItemName" type="text" />
					</view>
				</view>
			</view>
			<view class="search_position">
				<view class="btn_position">
					<button class="button" form-type="submit">查询</button>
					<button class="button1" >确认</button>
				</view>
			</view>
		</form>
		<!-- 表格 -->
		<scroll-view scroll-x="true" style="overflow-x: scroll; white-space: nowrap;" lower-threshold="50">
			<view class="table">
				<view class="table-tr">
					<view class="table-th1">工单名称</view>
					<view class="table-th1">料号</view>
					<view class="table-th1">料号名称</view>
					<view class="table-th1">规格型号</view>
					<view class="table-th1">预计开工日</view>
					<view class="table-th1">开工量</view>
				</view>
				<!-- :class="{ selected: selectedIndex === index,'selected-row':selectedRow ===index }" -->
				<view class="table-tr" v-for="(item, index) in dataList" :key="index"
					:class="{ selected: item.selectedIndex === index, 'selected-row': item.selectedRow }"
					@click="selectRow(index,item.wip_entity_name)">
					<view class="table-td1">{{item.wip_entity_name}}</view>
					<view class="table-td2">{{item.primary_item}}</view>
					<view class="table-td2">{{item.item_name}}</view>
					<view class="table-td2">{{item.item_desc}}</view>
					<view class="table-td2">{{item.plan_start_date}}</view>
					<view class="table-td2">{{item.start_quantity}}</view>
				</view>
			</view>
		</scroll-view>

		<!-- 分页 -->
		<view class="pagination">
			<view class="up_page" :class="{ 'first-page': isFirstPage }" :disabled="currentPage === 1"
				@click="prevPage">
				<</view>
					<view class="now_page">
						<text style="color:#2979ff">{{ currentPage }} </text><text
							style="color:#4b4b4b">/{{ totalPage }}</text>
					</view>
					<view class="down_page" :class="{ 'last-page': isLastPage }" :disabled="currentPage === totalPage"
						@click="nextPage">></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				totalPage: 0,
				selectedIndex: -1,
				isFirstPage: '',
				isLastPage: '',
				selectedRow: '',
				wip_entity_name: '',
				ItemNo: '',
				ItemName: '',
			};
		},
		computed: {
			getCurrentPageData() {
				const startIndex = (this.currentPage - 1) * this.pageSize;
				const endIndex = startIndex + this.pageSize;
				return this.dataList.slice(startIndex, endIndex);
			}
		},
		methods: {
			//模糊查询
			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方法重新获取数据
			},
			//选择行
			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;
			  }
			},
			//上一页
			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方法获取下一页数据
				}
			},
			//获取数据
			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("查询失败");
					}
				});
			}
		},
		mounted() {
			this.getData(1);
		}
	};
</script>
<style>
	/* 行选择样式 */
	.selected-row {
		background-color: #74bfe7;
	}

	/* 第一页和最后一页,按钮的样式 */
	.up_page.first-page {
		color: #afafaf;
	}

	.down_page.last-page {
		color: #afafaf;
	}

	/* 翻页样式 */
	.pagination {
		display: flex;
		width: 100%;
		background-color: #f5f5f5;
		align-items: center;
		justify-items: center;
		justify-content: center;
		height: 60rpx;
		border: 1rpx solid gray;
		border-top: none;
	}

	.up_page {
		width: 10%;
		text-align: center;
		color: #4b4b4b;
	}

	.down_page {
		width: 10%;
		text-align: center;
		color: #4b4b4b;
	}

	.now_page {
		width: 80%;
		text-align: center;
	}

	/* 表格样式 */
	.table {
		margin-top: 5%;
		font-size: 85%;
		display: table;
		width: 200%;
		border-collapse: collapse;
		box-sizing: border-box;
	}

	.table-tr {
		display: table-row;
	}

	.table-th1 {
		width: 20%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-th2 {
		width: 30%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-th3 {
		width: 50%;
		display: table-cell;
		font-weight: bold;
		border: 1rpx solid gray;
		background-color: #51aad6;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td1 {
		width: 20%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td2 {
		width: 30%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		padding: 10rpx 0;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.table-td3 {
		width: 50%;
		display: table-cell;
		border: 1rpx solid gray;
		text-align: center;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		/* padding: 5px 0; */
	}

	/* 搜索框 */
	.search_position {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 5% 0;
		/* border:1px solid black; */
	}

	.search {
		width: 90%;
		/* border:1px solid black; */
		display: flex;
	}

	.search_left {
		font-size: 105%;
		font-weight: bold;
		color: rgb(90, 90, 90);
		width: 30%;
	}

	.search_right {
		border-bottom: 1px solid rgb(95, 95, 95);
		width: 70%;
	}

	.btn_position {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60%;
		margin: 2% 0;
		/* border: 1px solid black; */
	}

	.button {
		margin-top: 5%;
		background-color: #40A4D6;
		color: #fff;
		font-size: 30rpx;
		/* border: 1px solid black; */
	}

	.button1 {
		margin-top: 5%;
		background-color: #fff ;
		color: #40A4D6;
		font-size: 30rpx;
		border: 1px solid #40A4D6;
	}
</style>

后端

  //模糊查询工单
  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);
}