<template> <a-card :bordered="false"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-row :gutter="24"> <a-col :span="6"> <a-form-item label="名称" name="username"> <a-input v-model:value="searchFormState.username" placeholder="请输入名称" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="身份证号" name="identityNo"> <a-input v-model:value="searchFormState.identityNo" placeholder="请输入身份证号" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="语言" name="language"> <a-input v-model:value="searchFormState.language" placeholder="请输入语言" /> </a-form-item> </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="信用分,默认100分" name="creditScore"> <a-input v-model:value="searchFormState.creditScore" placeholder="请输入信用分,默认100分" /> </a-form-item> </a-col> <a-col :span="6"> <a-button type="primary" @click="tableRef.refresh()">查询</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button> <a @click="toggleAdvanced" style="margin-left: 8px"> {{ advanced ? '收起' : '展开' }} <component :is="advanced ? 'up-outlined' : 'down-outlined'"/> </a> </a-col> </a-row> </a-form> <s-table ref="tableRef" :columns="columns" :data="loadData" :alert="options.alert.show" bordered :row-key="(record) => record.passengerId" :tool-config="toolConfig" :row-selection="options.rowSelection" > <template #operator class="table-operator"> <a-space> <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('opsPassengerAdd')"> <template #icon><plus-outlined /></template> 新增 </a-button> <xn-batch-button v-if="hasPerm('opsPassengerBatchDelete')" buttonName="批量删除" icon="DeleteOutlined" buttonDanger :selectedRowKeys="selectedRowKeys" @batchCallBack="deleteBatchOpsPassenger" /> </a-space> </template> <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'action'"> <a-space> <a @click="formRef.onOpen(record)" v-if="hasPerm('opsPassengerEdit')">编辑</a> <a-divider type="vertical" v-if="hasPerm(['opsPassengerEdit', 'opsPassengerDelete'], 'and')" /> <a-popconfirm title="确定要删除吗?" @confirm="deleteOpsPassenger(record)"> <a-button type="link" danger size="small" v-if="hasPerm('opsPassengerDelete')">删除</a-button> </a-popconfirm> </a-space> </template> </template> </s-table> </a-card> <Form ref="formRef" @successful="tableRef.refresh()" /> </template> <script setup name="passenger"> import { cloneDeep } from 'lodash-es' import Form from './form.vue' import opsPassengerApi from '@/api/ops/opsPassengerApi' const searchFormState = ref({}) const searchFormRef = ref() const tableRef = ref() const formRef = ref() const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } // 查询区域显示更多控制 const advanced = ref(false) const toggleAdvanced = () => { advanced.value = !advanced.value } const columns = [ { title: '名称', dataIndex: 'username' }, { title: '联系方式', dataIndex: 'mobile' }, { title: '累计消费金额', dataIndex: 'accumulatedConsumption' }, { title: '消费次数', dataIndex: 'cumulativeNumber' }, { title: '状态', dataIndex: 'userStatus' }, { title: '上一次消费时间', dataIndex: 'lastConsumption' }, ] // 操作栏通过权限判断是否显示 if (hasPerm(['opsPassengerEdit', 'opsPassengerDelete'])) { columns.push({ title: '操作', dataIndex: 'action', align: 'center', width: 150 }) } const selectedRowKeys = ref([]) // 列表选择配置 const options = { // columns数字类型字段加入 needTotal: true 可以勾选自动算账 alert: { show: true, clear: () => { selectedRowKeys.value = ref([]) } }, rowSelection: { onChange: (selectedRowKey, selectedRows) => { selectedRowKeys.value = selectedRowKey } } } const loadData = (parameter) => { const searchFormParam = cloneDeep(searchFormState.value) return opsPassengerApi.opsPassengerPage(Object.assign(parameter, searchFormParam)).then((data) => { return data }) } // 重置 const reset = () => { searchFormRef.value.resetFields() tableRef.value.refresh(true) } // 删除 const deleteOpsPassenger = (record) => { let params = [ { passengerId: record.passengerId } ] opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.refresh(true) }) } // 批量删除 const deleteBatchOpsPassenger = (params) => { opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.clearRefreshSelected() }) } </script> 寻找前端列表渲染操作
时间: 2025-06-19 08:14:35 浏览: 26
### 前端列表渲染操作的实现方法和代码示例
在前端开发中,列表渲染是一种常见的需求,特别是在使用 Vue.js 这样的框架时。Vue.js 提供了多种方式来实现列表渲染,包括但不限于 `v-for` 指令、组件化表格(如 S-Table 和 A-Table)以及树形数据展示等[^1]。
#### 使用 Vue.js 的 v-for 指令进行基础列表渲染
Vue.js 提供了 `v-for` 指令,用于基于数组或对象渲染列表。以下是一个简单的示例:
```html
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' }
]
}
});
</script>
```
通过上述代码,可以轻松地将一个数组中的每一项渲染为列表项[^1]。
#### 使用 S-Table 组件进行复杂列表渲染
S-Table 是 Ant Design Vue 中的一个高级表格组件,支持分页、排序、筛选等功能。以下是一个使用 S-Table 的示例:
```html
<template>
<a-table :columns="columns" :data-source="data" />
</template>
<script>
export default {
data() {
return {
columns: [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' }
],
data: [
{ key: '1', name: 'John Brown', age: 32 },
{ key: '2', name: 'Jim Green', age: 42 },
{ key: '3', name: 'Joe Black', age: 32 }
]
};
}
};
</script>
```
此示例展示了如何定义列和数据源,并将其绑定到 S-Table 组件上[^2]。
#### 使用 A-Table 组件进行交互式列表渲染
A-Table 是 Ant Design Vue 的另一个表格组件,支持更复杂的交互功能,例如单元格编辑、树形数据展示等。以下是一个使用 A-Table 的示例:
```html
<template>
<a-table :columns="columns" :data-source="data" :pagination="false">
<template #bodyCell="{ column, record }">
<span v-if="column.dataIndex === 'name'">
<a href="javascript:;">{{ record.name }}</a>
</span>
</template>
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' }
],
data: [
{ key: '1', name: 'John Brown', age: 32 },
{ key: '2', name: 'Jim Green', age: 42 },
{ key: '3', name: 'Joe Black', age: 32 }
]
};
}
};
</script>
```
此示例展示了如何通过自定义模板实现单元格级别的交互功能[^2]。
#### 使用 Element Plus 的 el-table 组件进行树形数据展示
Element Plus 提供了 `el-table` 组件,支持树形数据展示和懒加载功能。以下是一个示例:
```html
<template>
<el-table :data="tableData" row-key="id" lazy :load="load" tree-props="children">
<el-table-column prop="name" label="Name" />
<el-table-column prop="age" label="Age" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'Parent 1', age: 30, children: [] },
{ id: 2, name: 'Parent 2', age: 35, children: [] }
]
};
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{ id: tree.id * 10 + 1, name: 'Child 1', age: 20 },
{ id: tree.id * 10 + 2, name: 'Child 2', age: 22 }
]);
}, 1000);
}
}
};
</script>
```
此示例展示了如何通过懒加载实现树形数据的动态加载[^3]。
###
阅读全文
相关推荐





<a-form-item label="检验检测明细" v-bind="validateInfos.miEtmInspectPlanItemList" :labelCol="{ xs: { span: 5 }, sm: { span: 2 } }" :wrapperCol="{ xs: { span: 24 }, sm: { span: 24 } }" > <j-vxe-table ref="planItemListRef" key="id" :keep-source="true" resizable bordered :columns="planItemListColumns" :dataSource="formData.miEtmInspectPlanItemList" :height="340" :disabled="disabled" :rowSelection="false" :asyncRemove="true" :toolbar-config="{ slots: ['prefix', 'suffix'], btns: [] }" :toolbar="!disabled" > <template #toolbarSuffix="props"> <a-button type="primary" @click="selectPlanItem">新增</a-button> </template> <template #action="props" v-if="!disabled"> 删除 </template> </j-vxe-table> <ledger-select-modal :defaultFullscreen="true" rowKey="id" @register="registerPlanItemModal" @get-select-result="onSelectPlanItemOk" /> </a-form-item>


<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
学习计划表
<form>
学习科目<input type="text"
class="form-control" placeholder="请输入学习科目">
学习内容<textarea
class="form-control" placeholder="请输入学习内容" style="height: 32px;"></textarea>
学习地点<select
class="form-select form-select-sm">
<option value="自习室">自习室</option>
<option value="图书馆">图书馆</option>
<option value="宿舍">宿舍</option>
</select>
<button type="submit" class="btn btn-primary">添加</button>
</form>
序号
学习科目
学习内容
学习地点
完成状态
操作
1
Vue.js前端实战开发
学习指令,例如v-if、v-for、v-model等
自习室
<input class="form-check-input" type="checkbox" role="switch"
id="cb1"><label class="form-check-label" for="cb1">未完成</label>
删除
2
1
自习室
<input class="form-check-input" type="checkbox" role="switch"
id="cb2"><label class="form-check-label" for="cb2">未完成</label>
删除
</body>




<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="check_logstate.jsp"></jsp:include>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html lang="zh_CN">
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎使用后台管理系统</title>
<script type="text/javascript" src="asset/page/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="asset/page/js/bootstrap.min.js"></script>
</head>
<body>
学生请假列表
学生用户
宿舍
开始时间
结束时间
原因
状态
操作
<c:forEach items="${outList}" var="out">
${out.realname}
${out.roomsname}
${out.starttime}
${out.endtime}
${out.reason}
${out.stats}
<c:if test="${out.stats eq '待审批' }">
处理 </c:if>删除
</c:forEach>
${html }
</body>
</html>
学生用户不显示姓名







