在AJAX中为<span>标签赋值

本文介绍了一个简单的jQuery代码片段,展示了如何使用jQuery来修改HTML元素的内容。通过一个具体的例子,即用'xxx'替换指定ID(#spName)对应的元素内容,帮助读者快速理解jQuery的基本操作。
简单明了的:
$("#spName").html("xxx")
<template> <div> <a-row :gutter="20"> <c-search-panel :columns="main.columns" @search="onSearch"></c-search-panel> <a-col :span="10"> <v-table filled highlight-current-row :dataSource="main.dataSource" :columns="main.columns" :pagination="main.pagination" :toolbar="main.toolbar" :proxy-config="main.proxyConfig" @cell-click="onMainCellClick" @toolbar-button-click="onToolbarClick" :sort-config="main.sortConfig" ref="mainTable" ></v-table> </a-col> <a-col :span="14"> <v-table filled :dataSource="secondary.dataSource" :columns="secondary.columns" :pagination="secondary.pagination" :toolbar="secondary.toolbar" :proxy-config="secondary.proxyConfig" @toolbar-button-click="onSecondaryToolbarClick" :sort-config="secondary.sortConfig" ref="secondaryTable" ></v-table> </a-col> </a-row> </div> </template> <script> import { fileSaver } from "@/utils"; import { toLine } from "~/utils/dataUtils"; import { getMajorBaseDropList } from "@/api/modules/newQc/inspect/proj/info/index.js"; import { getQaDeptBases, putQaDeptBases, deleteQaDeptBases, getQaDeptPersonBases, putQaDeptPersonBases, deleteQaDeptPersonBases, exportQaDeptPersonBases, importQaDeptPersonBasesAndExport, exportQaDeptPersonBasesTemplates, findUserCode, } from "@/api/modules/newQc/deptBase/index.js"; export default { data() { return { main: { sortConfig: { defaultSort: { field: "createDate", order: "desc" } }, dataSource: undefined, columns: [ { dataIndex: "selection", type: "checkbox", align: "center", fixed: "left", width: 50 }, { dataIndex: "projNo", title: "项目", type: "project", condition: true, editable: true, rules: [{ required: true }], width: 120, }, // { // dataIndex: "deptNo", // title: "部门代码", // condition: true, // editable: true, // rules: [{ required: true }], // width: 140, // }, { dataIndex: "deptNo", title: "部门信息", condition: true, editable: true, rules: [{ required: true }], type: 'organization', options: { fieldNames: { label: "name", value: "number", }, }, //VTable onChange: ({row, deptInfo}) => { row.deptName = deptInfo.name; row.deptNo = deptInfo.number; }, formatter: ({row}) => (row.deptName ? `${row.deptName}(${row.deptNo})` : ''), }, ], pagination: { total: 0 }, toolbar: { buttons: [ { code: "insert", name: "新增", resource: [{ url: "/service-qc/qa/dept/base", method: "PUT" }], }, { code: "save", name: "保存", resource: [{ url: "/service-qc/qa/dept/base", method: "PUT" }], }, { code: "delete", //name: "删除", name: this.$t("crud.remove"), resource: [{ url: "/service-qc/qa/dept/base", method: "DELETE" }], }, ], }, proxyConfig: { autoLoad: false, ajax: { query: (pagination, ...args) => this.onMainTableQuery(pagination, args), save: ({ body }) => this.onMainTableSave(body), delete: ({ body }) => this.onMainTableDelete(body), }, }, }, secondary: { sortConfig: { defaultSort: { field: "createDate", order: "desc" } }, dataSource: undefined, columns: [ { dataIndex: "selection", type: "checkbox", width: 50 }, { dataIndex: "code", title: "账号", editable: true, rules: [{ required: true }], width: 140, onChange: ({ row, value }) => { // 根据业务逻辑生成 email console.log('asasas') } }, { dataIndex: "name", title: "姓名", editable: true, rules: [{ required: true }], width: 120, }, { dataIndex: "phoneNo", title: "手机", editable: true, rules: [{ required: true }], width: 120, }, { dataIndex: "email", title: "邮箱", editable: true, width: 200 ,rules: [{ required: true }]}, { dataIndex: "telNo", title: "电话", editable: true, width: 120 }, ], pagination: { total: 0 }, toolbar: { buttons: [ { code: "add", name: "新增", resource: [{ url: "/service-qc/qa/dept/person/base", method: "PUT" }], }, { code: "save", name: "保存", resource: [{ url: "/service-qc/qa/dept/person/base", method: "PUT" }], }, { code: "delete", //name: "删除", name: this.$t("crud.remove"), resource: [{ url: "/service-qc/qa/dept/person/base", method: "DELETE" }], }, { code: "template", name: "模板", resource: [ { url: "/service-qc/qa/dept/person/base/excels/templates", method: "GET" }, ], }, { code: "importAndUploadData", name: "导入", resource: [{ url: "/service-qc/qa/dept/person/base/excels", method: "POST" }], }, { code: "exportData", name: "导出", resource: [{ url: "/service-qc/qa/dept/person/base/excels", method: "GET" }], }, ], }, proxyConfig: { autoLoad: false, ajax: { query: (pagination, ...args) => this.onSecondaryTableQuery(pagination, args), save: ({ body }) => this.onSecondaryTableSave(body), delete: ({ body }) => this.onSecondaryTableDelete(body), }, }, }, currentRow: undefined, currentKeyword: undefined, }; }, computed: { mainTable() { return this.$refs.mainTable.getTable(); }, secondaryTable() { return this.$refs.secondaryTable.getTable(); }, }, methods: { onSearch(value) { this.currentKeyword = value; this.mainTable.commitProxy("query"); }, onMainCellClick(cell, event) { if ( (!this.currentRow && (cell.row.id + "").indexOf("row") == -1 && Number(cell.row.id) > 0) || ((cell.row.id + "").indexOf("row") == -1 && Number(cell.row.id) > 0 && this.currentRow.id != cell.row.id) ) { this.currentRow = cell.row; this.secondaryTable.commitProxy("query"); } }, onMainTableQuery(pagination, args) { let sort = pagination.sort; let sorter = ""; if (sort && sort.field && sort.order) { sorter = toLine(sort.field) + "," + sort.order; } else { sorter = "createDate,desc"; } const parameters = this.$vtable.pagination( pagination.page, pagination.sort, pagination.filters, args, ); return getQaDeptBases({ ...parameters, sort: sorter, ...this.currentKeyword }); }, onMainTableSave(body) { return putQaDeptBases( body.updateRecords.concat( body.insertRecords && body.insertRecords.length ? body.insertRecords.map(x => { x["id"] = undefined; return x; }) : body.insertRecords, ), ); }, onMainTableDelete(body) { return deleteQaDeptBases(body.removeRecords.map(x => x["id"])); }, //toolbar onToolbarClick(target) {}, onSecondaryTableQuery(pagination, args) { const parameters = this.$vtable.pagination( pagination.page, pagination.sort, pagination.filters, args, ); var par = { deptId: this.currentRow.id }; return getQaDeptPersonBases({ ...parameters, ...par }); }, onSecondaryTableSave(body) { if (this.currentRow && this.currentRow.id) { return putQaDeptPersonBases( body.updateRecords.concat( body.insertRecords && body.insertRecords.length ? body.insertRecords.map(x => { x["id"] = undefined; x["deptId"] = this.currentRow.id; return x; }) : body.insertRecords, ), ); } else { this.$message.error("请选择左侧部门"); } }, onSecondaryTableDelete(body) { return deleteQaDeptPersonBases(body.removeRecords.map(x => x["id"])); }, //toolbar onSecondaryToolbarClick(target) { const fileName = "QC责任部门及人员信息.xlsx"; switch (target.code) { case "add": if ( this.currentRow && this.currentRow.id && (this.currentRow.id + "").indexOf("row") == -1 ) { this.secondaryTable.insert(); } else { this.$message.error("请先保存左侧部门"); } break; case "exportData": exportQaDeptPersonBases(this.currentKeyword).then(response => { fileSaver.saveAs(response.data, fileName); }); break; case "importAndUploadData": this.secondaryTable.readFile({ types: ["xlsx", "xls"] }).then(response => { const { files } = response; if (files.length < 1) return; importQaDeptPersonBasesAndExport(files[0]).then(response => { if (response.data.size > 0) { this.$message.error("上传失败,请查看错误文件"); fileSaver.saveAs(response.data, fileName); } else { //this.$message.success("上传成功!"); this.$message.success(this.$t("pipeControll.common.uploadSuccess")); } }); }); break; case "template": exportQaDeptPersonBasesTemplates({}).then(response => { fileSaver.saveAs(response.data, fileName); }); break; default: break; } }, }, mounted() {}, }; </script> <style scoped> .c-input-search { margin: 8px 0 10px 0; } </style> { dataIndex: "code", title: "账号", editable: true, rules: [{ required: true }], width: 140, }, 输入值后调用方法给{ dataIndex: "email", title: "邮箱", editable: true, width: 200 ,rules: [{ required: true }]}, 赋值用插槽方式
最新发布
11-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值