寻找前端列表渲染操作 - CSDN文库", "datePublished": "2025-06-19", "keywords": " 寻找前端列表渲染操作", "description": "文章浏览阅读26次。### 前端列表渲染操作的实现方法和代码示例在前端开发中,列表渲染是一种常见的需求,特别是在使用 Vue.js 这样的框架时。Vue.js 提供了多种方式来实现列表渲染,包括但不限于 `v-for` 指令、组件化表格(如 S-Table 和 A-Table)以及树形数据展示等[^1]。#### 使用 Vue.js 的 v-for 指令进行基础列表渲染" }
活动介绍

<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]。 ###
阅读全文

相关推荐

<script setup lang="ts"> import { onMounted, ref,watch } from "vue"; import { $t } from "@/locales"; import { computed } from 'vue'; import { sourceOptions, softwareChangeOptions, canUpgradeOptions } from "@/constants/business"; import { translateOptions } from "@/utils/common"; import { useNaiveForm } from "@/hooks/common/form";; import { router } from "@/router"; const currentRoute = ref(router.currentRoute); defineOptions({ name: "LedgerSearch", }); interface Emits { (e: "reset"): void; (e: "search"): void; } const emit = defineEmits<Emits>(); const { formRef, validate, restoreValidation } = useNaiveForm(); const model = defineModel<Api.Change.LedgerSearchParams>("model", { required: true, }); async function reset() { await restoreValidation(); emit("reset"); } async function search() { await validate(); emit("search"); } onMounted(async () => {}); </script> <template> <NCard :bordered="false" size="small" class="card-wrapper"> <NCollapse> <NCollapseItem :title="$t('common.search')" name="change-ledger-search"> <NForm ref="formRef" :model="model" label-placement="left" :label-width="80" > <NGrid responsive="screen" item-responsive> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.source')" path="source" class="pr-24px" > <NSelect v-model:value="model.source" :placeholder="$t('page.change.ledger.form.source')" :options="translateOptions(sourceOptions)" filterable clearable /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.peco')" path="peco" class="pr-24px" > <NInput v-model:value="model.peco" :placeholder="$t('page.change.ledger.form.peco')" /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.projectno')" path="projectno" class="pr-24px" > <NInput v-model:value="model.projectno" :placeholder="$t('page.change.ledger.form.projectno')" /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.dept')" path="dept" class="pr-24px" > <NInput v-model:value="model.dept" :placeholder="$t('page.change.ledger.form.dept')" /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.canUpgrade')" path="canUpgrade" class="pr-24px" > <NSelect v-model:value="model.canUpgrade" :placeholder="$t('page.change.ledger.form.canUpgrade')" :options="translateOptions(canUpgradeOptions)" filterable clearable /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6" :label="$t('page.change.ledger.softwareChange')" path="softwareChange" class="pr-24px" > <NSelect v-model:value="model.softwareChange" :placeholder="$t('page.change.ledger.form.softwareChange')" :options="translateOptions(softwareChangeOptions)" filterable clearable /> </NFormItemGi> <NFormItemGi span="24 s:12 m:6"> <NSpace class="w-full" justify="end"> <NButton @click="reset"> <template #icon> <icon-ic-round-refresh class="text-icon" /> </template> {{ $t("common.reset") }} </NButton> <NButton type="primary" ghost @click="search"> <template #icon> <icon-ic-round-search class="text-icon" /> </template> {{ $t("common.search") }} </NButton> </NSpace> </NFormItemGi> </NGrid> </NForm> </NCollapseItem> </NCollapse> </NCard> </template> <style scoped></style> dept是一个搜索字段,希望可以将数据库中的dept表的内容作为搜素框下拉的选项

营养改善计划食堂供餐食材配送情况一览表 <input type="checkbox" id="checkAll" class="check-all"> 学校名称 物品名称 周一 周二 周三 周四 周五 合计1 合计2 配送时间 操作 <c:forEach var="list" items="${list}" varStatus="i"> <input type="checkbox" class="check-item"> ${list.DWMC} ${list.WPMC} <%-- ${list.MONDAY} --%> ${list.MONDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} ${list.TUESDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.TUESDAY} --%> ${list.WEDNESDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.WEDNESDAY} --%> ${list.THURSDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.THURSDAY} --%> ${list.FRIDAY}${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- ${list.FRIDAY} --%> ${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? list.HJ2 : list.HJ} <%-- ${list.HJ} --%> <%-- ${list.HJ2} --%> ${list.HJ2} ${list.WPMC == '大米(g)' ? '袋' : ''} ${list.WPMC == '面粉(g)' ? '袋' : ''} ${list.WPMC == '食用油(g)' ? '桶' : ''} ${list.WPMC == '鸡蛋(个)' ? '个' : ''} ${list.WPMC == '牛奶(盒)' ? '盒' : ''} ${list.WPMC == '鸡肉' || list.WPMC == '猪肉' ? 'kg' : ''} <%-- <input type="text" id="txt_PSSJ" class="form-control input-radius date" name="PSSJ" value="${list.PSSJ}"> --%> <input type="text" class="txt-pssj form-control input-radius date" name="PSSJ" value="${list.PSSJ}"> <button type="button" class="btn btn-primary btn-xs btn-save" >保存</button> <input type="hidden" id="txt_kssj" class="form-control input-radius date" name="kssj" value="${list.kssj}"> <input type="hidden" id="txt_jssj" class="form-control input-radius date" name="jssj" value="${list.jssj}"> <input type="hidden" id="txt_wpbh" class="form-control input-radius wpbh" name="wpbh" value="${list.wpbh}"> <input type="hidden" class="saasdm" value="${list.saasdm}"> </c:forEach> 前台html是这样的

<template> <template v-slot:btnBox> <import-download-document :exportParams="exportParams" :importParams="importParams" :exportData="exportData" @getTableList="getTableList" > <a-button slot="export" icon="upload" type="primary" class="mgr10">{{ $t('导出') }}</a-button> </import-download-document> </template> <template v-slot:serchBox> {{ item.name }} <a-month-picker :allowClear="false" format="YYYY-M" v-model="searchData.dateTime" v-if="tabActive == 0" :placeholder="$t('请选择月份')" /> <a-date-picker :allowClear="false" :open="open" @openChange="openYearDatePicker" v-else v-model="searchData.dateTime" mode="year" :placeholder="$t('请选择年份')" format="YYYY" @panelChange="onSearchDateEvent" /> <a-button type="primary" @click="onSearch"> {{ $t('common.scf.btn.search') }} </a-button> </template> <template v-slot:tableBox> <a-table :scroll="{ x: '100%', y: tableHeight }" :bordered="false" :columns.sync="columns" :dataSource="tableData" :pagination="false" rowKey="facilityCode" > </a-table> </template> <template v-slot:paginationBox> <my-pagination style="padding: 0" :showSizeChanger="true" :pageIndex.sync="pagination.currentPage" @changePage="changePage" :pageSize="pagination.pageSize" :total="pagination.totalRows" @onShowSizeChange="onShowSizeChange" v-if="tableData.length" ></my-pagination> </template> </template> <script> import factory from '../factory' import myPagination from '@/components/scfComponents/paginationFormwork/myPagination' import tableFormworkPage from '@/components/scfComponents/tableFormwork/tableFormworkPage' import importDownloadDocument from '../../../components/importDownloadDocument.vue' export default { components: { tableFormworkPage, myPagination, importDownloadDocument, }, data() { return { tableHeight: 0, searchData: {}, tabActive: 0, tabs: [ { name: this.$t('月'), value: 0 }, { name: this.$t('年'), value: 1 }, ], open: false, analysisType: null, baseColumns: [ { key: 'departmen_name', title: this.$t('所属部门'), dataIndex: 'department_name', ellipsis: true, resizable: true, minWidth: 100, }, { key: 'detector_name', title: this.$t('设备名称'), dataIndex: 'detector_name', ellipsis: true, resizable: true, minWidth: 100, }, { key: 'detector_code', title: this.$t('设备编号'), dataIndex: 'detector_code', ellipsis: true, resizable: true, minWidth: 100, }, ], dynamicColumns: [], actionColumn: [ { key: 'rowTotal', title: this.$t('总计'), dataIndex: 'rowTotal', ellipsis: true, resizable: true, minWidth: 100, }, ], tableData: [ { detector_code: '457897846874545', department_name: '测试部门', '2025-05': 0, '2025-04': 0, '2025-07': 0, '2025-06': 7600, '2025-09': 0, detector_name: '采集能耗探测器', '2025-08': 0, '2025-10': 0, rowTotal: 7600, '2025-01': 0, '2025-12': 0, '2025-11': 0, '2025-03': 0, '2025-02': 0, }, ], pagination: { pageSize: 10, currentPage: 1, totalRows: 0, }, importParams: { isShowImport: false, }, } }, computed: { exportParams() { return { isExtract: true, isShowExport: true, exportUrl: +this.tabActive === 0 ? 'abnormalAnalysis/monthInfo' : 'abnormalAnalysis/yearInfo', } }, columns() { return [...this.baseColumns, ...this.dynamicColumns, ...this.actionColumn] }, }, created() { this.searchData = { analysisType: 'MONTH', dateTime: moment(), } this.getTableData() }, mounted() { this.tableHeight = 0 this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48 window.onresize = () => { this.tableHeight = 0 this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48 } }, methods: { onTabEvent(key) { if (key !== this.tabActive) { this.tabActive = key this.searchData.analysisType = key == 0 ? 'MONTH' : 'YEAR' } }, onSearchDateEvent(val) { this.searchData.dateTime = val this.open = false }, openYearDatePicker(status) { this.open = status }, // 搜索 onSearch() { this.pagination.currentPage = 1 this.getTableData() }, // 获取表格数据 async getTableData() { try { const dateFormat = +this.tabActive === 0 ? 'YYYY-M' : 'YYYY' const dateValue = this.searchData.dateTime.format(dateFormat) const params = { analysisType: this.searchData.analysisType, value: dateValue, deptIdListSelect: [1, 2], page: this.pagination.currentPage, pageSize: this.pagination.pageSize, } console.log(params, 'paramsparamsparamsparams') // 根据标签页调用不同接口 const apiMethod = +this.tabActive === 0 ? factory.getMonthInfo : factory.getYearInfo const res = await apiMethod if (res && res.data) { this.dynamicColumns = [] let headerData = res.data.header || [] this.dynamicColumns = headerData.map(item => ({ key: item.headerKey, title: item.headerName, dataIndex: item.headerKey, ellipsis: true, resizable: true, minWidth: 100, })) this.tableData = res.data.pageData || [] this.pagination.totalRows = res.data.totalCount || 0 } } catch (error) { this.$message.error(error) } }, // 分页 changePage(currentPage) { this.pagination.currentPage = currentPage this.getTableData() }, // 每页条数发生变化 onShowSizeChange(pageSize) { this.pagination.currentPage = 1 this.pagination.pageSize = pageSize this.getTableData() }, }, } </script> <style lang="less" scoped> .abnormal-statistics { width: 100%; height: 100%; box-sizing: border-box; position: relative; .type-tabs { margin-right: 4px; .tabs-item { padding: 0 18px; line-height: 30px; border: 1px solid #e9ebee; cursor: pointer; font-size: 14px; color: #fff; margin-right: -1px; &:first-child { border-radius: 3px 0 0 3px; } &:last-child { border-radius: 0 3px 3px 0; } &-active { color: #1c79f4; border: 1px solid #1c79f4; background: rgba(28, 121, 244, 0.1); z-index: 2; } } } } </style> dynamicColumns请求道数据后 columns会实时渲染的吗

<template> <template v-if="companyInfo.companyCode"> <a-spin :spinning="isLoading" :delay="500" :tip="$t('加载中...')"> {{ $t('预案是否启用') }} <a-radio-group v-model="formData.enabled" :default-value="1"> <a-radio :value="1">{{ $t('启用') }}</a-radio> <a-radio :value="0">{{ $t('禁用') }}</a-radio> </a-radio-group> {{ $t('报警类型:') }} <a-select collapseTags mode="multiple" :maxTagCount="2" v-model="formData.type" allowClear placeholder="请选择" optionFilterProp="label" > <a-select-option v-for="(item, index) in typeOptions" :value="item.value" :key="index"> {{ item.label }} </a-select-option> </a-select> {{ $t('工单派发配置:') }} <a-table rowKey="id" :columns="columns" :dataSource="tableData" :pagination="false"> <template slot="staff" slot-scope="text, record, index"> <a-select v-model="record.staffConfig" mode="multiple" placeholder="选择人员" optionFilterProp="label" :maxTagCount="2" allowClear @change="val => handleStaffChange(val, index)" > <a-select-option v-for="person in record.availableStaff" :key="person.id" :label="person.name" :value="person.id" > {{ person.name }} </a-select-option> </a-select> </template> <template slot="time" slot-scope="text, record, index"> <a-select v-model="tableList[index].timeConfig" allowClear placeholder="选择期望完成时间"> <a-select-option v-for="option in timeOptions" :key="option.value" :value="option.value"> {{ option.label }} </a-select-option> </a-select> </template> </a-table> <a-button @click="onSave" type="primary">{{ $t('确定') }}</a-button> <a-button @click="onCancel" type="normal">{{ $t('取消') }}</a-button> </a-spin> </template> </template> <script> export default { props: { orgInfo: { type: Object, default: () => { return {}; }, }, companyInfo: { type: Object, default: () => { return {}; }, }, }, data() { return { isLoading: false, formData: {}, typeOptions: [ { label: '选项1', value: 1, }, { label: '选项2', value: 2, }, { label: '选项3', value: 3, }, { label: '选项4', value: 4, }, ], columns: [ { title: '部门', key: 'department', dataIndex: 'department', ellipsis: true, }, { title: '用户', key: 'staff', dataIndex: 'staff', scopedSlots: { customRender: 'staff' }, }, { title: '期望完成时间设定', key: 'time', dataIndex: 'time', scopedSlots: { customRender: 'time' }, }, ], tableList: [ { id: '012', department: '技术部', staffConfig: ['001', '002'], timeConfig: '24h' }, { id: '013', department: '运维部', staffConfig: ['003'], timeConfig: '48h' }, { id: '014', department: '安全部', staffConfig: [], timeConfig: '7d' }, { id: '015', department: '网络部', staffConfig: [], timeConfig: '24h' }, { id: '016', department: '数据库部', staffConfig: [], timeConfig: '12h' }, ], timeOptions: [ { label: '报警后12小时', value: '12h' }, { label: '报警后24小时', value: '24h' }, { label: '报警后48小时', value: '48h' }, { label: '报警后7日内', value: '7d' }, ], staffList: [ { id: '001', name: '张三' }, { id: '002', name: '李四' }, { id: '003', name: '王五' }, { id: '004', name: '赵六' }, ], }; }, computed: { tableData() { // 被选中的用户的ID const allSelected = new Set(); this.tableList.forEach(row => { if (Array.isArray(row.staffConfig)) { row.staffConfig.forEach(id => allSelected.add(id)); } }); // 为每行生成可用人员列表 return this.tableList.map(row => { const currentSelected = new Set(row.staffConfig || []); const availableStaff = this.staffList.filter( person => !allSelected.has(person.id) || currentSelected.has(person.id) ); return { ...row, availableStaff }; }); }, }, mounted() {}, methods: { // 人员选择 handleStaffChange(value, index) { // 人员只能选择两位 if (value && value.length > 2) { this.$message.destroy(); this.$message.warning('人员最多选择2位'); value = value.slice(0, 2); } this.$set(this.tableList[index], 'staffConfig', value); }, // 确定 onSave() { console.log('保存的数据:', { tableList: this.tableList, formData: this.formData, }); }, // 取消 onCancel() {}, }, }; </script> <style lang="less" scoped> .alarm-work-order { height: 100%; width: 100%; position: relative; box-sizing: border-box; .edit-view { width: 100%; padding: 46px 32px 24px 32px; .input-item { width: 100%; display: flex; margin-bottom: 22px; &:last-child { margin-bottom: 0 !important; } } .input-lable { width: 88px; min-width: 88px; justify-content: start; display: flex; color: #808e9d; font-size: 14px; line-height: 19px; margin-right: 24px; span { white-space: nowrap; } } .text-bold { font-weight: bold; color: #4e5c6b; } .text-align { align-items: center; } .btn-view { display: flex; align-items: center; justify-content: flex-start; padding-left: 112px; margin-top: 24px; & > button { margin-right: 12px; } } } } </style> 代码评审

最新推荐

recommend-type

C#类库封装:简化SDK调用实现多功能集成,构建地磅无人值守系统

内容概要:本文介绍了利用C#类库封装多个硬件设备的SDK接口,实现一系列复杂功能的一键式调用。具体功能包括身份证信息读取、人证识别、车牌识别(支持臻识和海康摄像头)、LED显示屏文字输出、称重数据读取、二维码扫描以及语音播报。所有功能均被封装为简单的API,极大降低了开发者的工作量和技术门槛。文中详细展示了各个功能的具体实现方式及其应用场景,如身份证读取、人证核验、车牌识别等,并最终将这些功能整合到一起,形成了一套完整的地磅称重无人值守系统解决方案。 适合人群:具有一定C#编程经验的技术人员,尤其是需要快速集成多种硬件设备SDK的应用开发者。 使用场景及目标:适用于需要高效集成多种硬件设备SDK的项目,特别是那些涉及身份验证、车辆管理、物流仓储等领域的企业级应用。通过使用这些封装好的API,可以大大缩短开发周期,降低维护成本,提高系统的稳定性和易用性。 其他说明:虽然封装后的API极大地简化了开发流程,但对于一些特殊的业务需求,仍然可能需要深入研究底层SDK。此外,在实际部署过程中,还需考虑网络环境、硬件兼容性等因素的影响。
recommend-type

基于STM32F1的BLDC无刷直流电机与PMSM永磁同步电机源码解析:传感器与无传感器驱动详解

基于STM32F1的BLDC无刷直流电机和PMSM永磁同步电机的驱动实现方法,涵盖了有传感器和无传感两种驱动方式。对于BLDC电机,有传感器部分采用霍尔传感器进行六步换相,无传感部分则利用反电动势过零点检测实现换相。对于PMSM电机,有传感器部分包括霍尔传感器和编码器的方式,无传感部分则采用了滑模观测器进行矢量控制(FOC)。文中不仅提供了详细的代码片段,还分享了许多调试经验和技巧。 适合人群:具有一定嵌入式系统和电机控制基础知识的研发人员和技术爱好者。 使用场景及目标:适用于需要深入了解和实现BLDC和PMSM电机驱动的开发者,帮助他们掌握不同传感器条件下的电机控制技术和优化方法。 其他说明:文章强调了实际调试过程中可能遇到的问题及其解决方案,如霍尔传感器的中断触发换相、反电动势过零点检测的采样时机、滑模观测器的参数调整以及编码器的ABZ解码等。
recommend-type

基于Java的跨平台图像处理软件ImageJ:多功能图像编辑与分析工具

内容概要:本文介绍了基于Java的图像处理软件ImageJ,详细阐述了它的跨平台特性、多线程处理能力及其丰富的图像处理功能。ImageJ由美国国立卫生研究院开发,能够在多种操作系统上运行,包括Windows、Mac OS、Linux等。它支持多种图像格式,如TIFF、PNG、GIF、JPEG、BMP、DICOM、FITS等,并提供图像栈功能,允许多个图像在同一窗口中进行并行处理。此外,ImageJ还提供了诸如缩放、旋转、扭曲、平滑处理等基本操作,以及区域和像素统计、间距、角度计算等高级功能。这些特性使ImageJ成为科研、医学、生物等多个领域的理想选择。 适合人群:需要进行图像处理的专业人士,如科研人员、医生、生物学家,以及对图像处理感兴趣的普通用户。 使用场景及目标:适用于需要高效处理大量图像数据的场合,特别是在科研、医学、生物学等领域。用户可以通过ImageJ进行图像的编辑、分析、处理和保存,提高工作效率。 其他说明:ImageJ不仅功能强大,而且操作简单,用户无需安装额外的运行环境即可直接使用。其基于Java的开发方式确保了不同操作系统之间的兼容性和一致性。
recommend-type

MATLAB语音识别系统:基于GUI的数字0-9识别及深度学习模型应用 · GUI v1.2

内容概要:本文介绍了一款基于MATLAB的语音识别系统,主要功能是识别数字0到9。该系统采用图形用户界面(GUI),方便用户操作,并配有详尽的代码注释和开发报告。文中详细描述了系统的各个组成部分,包括音频采集、信号处理、特征提取、模型训练和预测等关键环节。此外,还讨论了MATLAB在此项目中的优势及其面临的挑战,如提高识别率和处理背景噪音等问题。最后,通过对各模块的工作原理和技术细节的总结,为未来的研究和发展提供了宝贵的参考资料。 适合人群:对语音识别技术和MATLAB感兴趣的初学者、学生或研究人员。 使用场景及目标:适用于希望深入了解语音识别技术原理的人群,特别是希望通过实际案例掌握MATLAB编程技巧的学习者。目标是在实践中学习如何构建简单的语音识别应用程序。 其他说明:该程序需要MATLAB 2019b及以上版本才能正常运行,建议使用者确保软件环境符合要求。
recommend-type

c语言通讯录管理系统源码.zip

C语言项目源码
recommend-type

Web前端开发:CSS与HTML设计模式深入解析

《Pro CSS and HTML Design Patterns》是一本专注于Web前端设计模式的书籍,特别针对CSS(层叠样式表)和HTML(超文本标记语言)的高级应用进行了深入探讨。这本书籍属于Pro系列,旨在为专业Web开发人员提供实用的设计模式和实践指南,帮助他们构建高效、美观且可维护的网站和应用程序。 在介绍这本书的知识点之前,我们首先需要了解CSS和HTML的基础知识,以及它们在Web开发中的重要性。 HTML是用于创建网页和Web应用程序的标准标记语言。它允许开发者通过一系列的标签来定义网页的结构和内容,如段落、标题、链接、图片等。HTML5作为最新版本,不仅增强了网页的表现力,还引入了更多新的特性,例如视频和音频的内置支持、绘图API、离线存储等。 CSS是用于描述HTML文档的表现(即布局、颜色、字体等样式)的样式表语言。它能够让开发者将内容的表现从结构中分离出来,使得网页设计更加模块化和易于维护。随着Web技术的发展,CSS也经历了多个版本的更新,引入了如Flexbox、Grid布局、过渡、动画以及Sass和Less等预处理器技术。 现在让我们来详细探讨《Pro CSS and HTML Design Patterns》中可能包含的知识点: 1. CSS基础和选择器: 书中可能会涵盖CSS基本概念,如盒模型、边距、填充、边框、背景和定位等。同时还会介绍CSS选择器的高级用法,例如属性选择器、伪类选择器、伪元素选择器以及选择器的组合使用。 2. CSS布局技术: 布局是网页设计中的核心部分。本书可能会详细讲解各种CSS布局技术,包括传统的浮动(Floats)布局、定位(Positioning)布局,以及最新的布局模式如Flexbox和CSS Grid。此外,也会介绍响应式设计的媒体查询、视口(Viewport)单位等。 3. 高级CSS技巧: 这些技巧可能包括动画和过渡效果,以及如何优化性能和兼容性。例如,CSS3动画、关键帧动画、转换(Transforms)、滤镜(Filters)和混合模式(Blend Modes)。 4. HTML5特性: 书中可能会深入探讨HTML5的新标签和语义化元素,如`<article>`、`<section>`、`<nav>`等,以及如何使用它们来构建更加标准化和语义化的页面结构。还会涉及到Web表单的新特性,比如表单验证、新的输入类型等。 5. 可访问性(Accessibility): Web可访问性越来越受到重视。本书可能会介绍如何通过HTML和CSS来提升网站的无障碍访问性,比如使用ARIA标签(Accessible Rich Internet Applications)来增强屏幕阅读器的使用体验。 6. 前端性能优化: 性能优化是任何Web项目成功的关键。本书可能会涵盖如何通过优化CSS和HTML来提升网站的加载速度和运行效率。内容可能包括代码压缩、合并、避免重绘和回流、使用Web字体的最佳实践等。 7. JavaScript与CSS/HTML的交互: 在现代Web开发中,JavaScript与CSS及HTML的交云并用是不可或缺的。书中可能会讲解如何通过JavaScript动态地修改样式、操作DOM元素以及使用事件监听和响应用户交互。 8. Web框架和预处理器: 这本书可能会提到流行的Web开发框架和预处理器,比如Bootstrap、Foundation、Sass和Less等,它们是如何简化和加速开发流程的。 9. 测试和维护: 书中也可能包含关于如何测试网页以及如何持续优化和维护CSS和HTML代码的章节。例如,使用断言测试、自动化测试、性能分析工具等。 最后,鉴于文件名称列表中的“压缩包子文件”的表述,这可能是对“压缩包”文件的一种误译或误用,此处“压缩包”应该指的是包含该书籍PDF文件的压缩文件格式,如ZIP或RAR。而“Pro CSS and HTML Design Patterns.pdf”指的就是该书籍的PDF格式电子版文件。 以上所述,构成了《Pro CSS and HTML Design Patterns》一书可能包含的核心知识点。通过学习这些内容,Web前端开发者可以掌握更为高效和优雅的设计模式,从而在日常工作中更高效地解决实际问题。
recommend-type

Zotero 7数据同步:Attanger插件安装&设置,打造文献管理利器

/i.s3.glbimg.com/v1/AUTH_08fbf48bc0524877943fe86e43087e7a/internal_photos/bs/2018/L/j/ipKA8TRPyt4ptaG1DGww/t-m-01.png) # 1. Zotero 7数据同步简介 在数字时代,管理研究数据变得日益重要,而Zot
recommend-type

卷积神经网络的基础理论200字

<think>我们正在回答用户关于卷积神经网络(CNN)基础理论的询问。根据提供的引用资料,我们可以概述CNN的基本结构和工作原理。引用[1]提到CNN是一种前馈神经网络,信息从输入单向流动到输出。引用[2]指出CNN在图像处理等领域应用广泛,通过层次结构和参数调整实现模式识别。引用[3]说明CNN包含卷积层,使用卷积核提取局部特征,减少参数量,提高效率。引用[4]则提到了训练过程,包括前向传播、误差计算和反向传播(梯度下降)。因此,我们将从以下几个方面概述CNN:1.CNN的基本结构(卷积层、池化层、全连接层)2.卷积操作的工作原理(局部感受野、权重共享)3.训练过程(前向传播、损失函数、反
recommend-type

轻便实用的Java库类查询工具介绍

标题 "java2库类查询" 和描述表明,所提及的工具是一个专门用于查询Java库类的应用程序。此软件旨在帮助开发者快速地查找和引用Java的标准开发工具包(SDK)中包含的所有应用程序编程接口(API)类。通过这样的工具,开发者可以节省大量在官方文档或搜索引擎上寻找类定义和使用方法的时间。它被描述为轻巧且方便,这表明其占用的系统资源相对较少,同时提供直观的用户界面,使得查询过程简洁高效。 从描述中可以得出几个关键知识点: 1. Java SDK:Java的软件开发工具包(SDK)是Java平台的一部分,提供了一套用于开发Java应用软件的软件包和库。这些软件包通常被称为API,为开发者提供了编程界面,使他们能够使用Java语言编写各种类型的应用程序。 2. 库类查询:这个功能对于开发者来说非常关键,因为它提供了一个快速查找特定库类及其相关方法、属性和使用示例的途径。良好的库类查询工具可以帮助开发者提高工作效率,减少因查找文档而中断编程思路的时间。 3. 轻巧性:软件的轻巧性通常意味着它对计算机资源的要求较低。这样的特性对于资源受限的系统尤为重要,比如老旧的计算机、嵌入式设备或是当开发者希望最小化其开发环境占用空间时。 4. 方便性:软件的方便性通常关联于其用户界面设计,一个直观、易用的界面可以让用户快速上手,并减少在使用过程中遇到的障碍。 5. 包含所有API:一个优秀的Java库类查询软件应当能够覆盖Java所有标准API,这包括Java.lang、Java.util、Java.io等核心包,以及Java SE平台的所有其他标准扩展包。 从标签 "java 库 查询 类" 可知,这个软件紧密关联于Java编程语言的核心功能——库类的管理和查询。这些标签可以关联到以下知识点: - Java:一种广泛用于企业级应用、移动应用(如Android应用)、网站后端、大型系统和许多其他平台的编程语言。 - 库:在Java中,库是一组预打包的类和接口,它们可以被应用程序重复使用。Java提供了庞大的标准库,以支持各种常见的任务和功能。 - 查询:查询指的是利用软件工具搜索、定位和检索信息的过程。对于Java库类查询工具来说,这意味着可以通过类名、方法签名或其他标识符来查找特定的API条目。 最后,压缩包文件列表包含了两个文件:“java.dit”和“Java.exe”。其中“Java.exe”很可能是程序的可执行文件,而“java.dit”可能是一个数据文件,用于存储Java类的索引或数据。由于文件名后缀通常与文件类型相关联,但“dit”并不是一个常见的文件扩展名。这可能是一个特定于软件的自定义格式,或是一个打字错误。 总结来说,"java2库类查询" 是一个针对Java开发者的实用工具,它提供了一个轻量级、易用的平台来查询和定位Java标准库中的所有类和API。此工具对优化开发流程,减少查找Java类文档的时间大有裨益,尤其适合需要频繁查阅Java API的开发者使用。
recommend-type

【Zotero 7终极指南】:新手必备!Attanger插件全攻略与数据同步神技

# 1. Zotero 7与Attanger插件的介绍 在当今的学术研究和知识管理领域,高效的文献管理工具至关重要。Zotero 7作为一个流行的参考文献管理软件,因其强大的功能和用户友好的界面而受到专业人士的青睐。而Attanger插件则为Zotero 7带来了更多定制化和高级功能,极大地增强