链接a href confirm记录的用法

本文探讨了在HTML中实现删除操作前的确认对话框的各种方法,并对比了不同实现方式的效果,强调了正确使用JavaScript的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

小东西confirm记录下,小错误总结方便下次用

1成功的

<a href='地址' onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a>


<a href="网址" onclick="{if(confirm('确定要删除吗?')){return true;}return false;}">删除</a>

 

 


2以下没调成功的不知道为什么
<a href="javascript:if(confirm("确实要删除吗?")){window.location=网址}" >删除</a>

 

代码编辑器不能用,贴以下代码 看几个删除不行,原来中间用了中文空格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<a href="javascript:if(confirm("确实要删除吗?")){window.location=http://www.sina.com.cn}" >删除</a>
<a href="javascript:if(confirm("确实要删除吗?"))window.location=http://www.sina.com.cn">删除</a>
<a href="http://www.sina.com.cn" onclick="{if(confirm('确定删除吗?')){return true;}return false;}">删除</a>

<a href="http://www.sina.com.cn" onclick="return confirm('该删除操作将无法恢复!是否继续?')">删除</a>

<a href='aaaaaaaa?pp=delete&id=2' onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a>

<a href="bbbbbbbbbbbbb?pp=delete&id=6" onclick="return confirm('删除后无法恢复,确定要删除吗')" >删除</a>

<a href='bbbbbbbbbbbbb?pp=delete&id=6' onclick="return confirm('删除后无法恢复,确定要删除吗')" >删除</a>

<a href="bbbbbbbbbbbbb?pp=delete&id=6" onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a>

<a href='aaaaaaaa?pp=delete&id=2'  onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a>

<a href='aaaaaaaa?pp=delete&id=2' onclick="return confirm('删除后无法恢复,确定要删除吗')">删除</a>


</body>
</html>

4在编辑列中的

<%# <a href=/"aaaaaaaaaa?pp=delete&id=" + Eval("ID") + "/" onclick=/"return confirm('删除后无法恢复,确定要删除吗')/">删除</a>%>

<template> <a-card :bordered="false" :class="{isShowStyle: indirectFlag}"> <!-- 查询区域 --> <div class="table-page-search-wrapper" v-if="!indirectFlag"> <a-form layout="inline" @keyup.enter.native="searchQuery"> <a-row :gutter='24'> <a-col :span='8'> <a-form-item label='主机厂'> <a-input v-model.trim='queryParam.oems' placeholder='请输入主机厂名称'></a-input> </a-form-item> </a-col> <a-col :span='8'> <a-form-item label='客户名称'> <a-input v-model.trim='queryParam.endUser' placeholder='请输入客户名称'></a-input> </a-form-item> </a-col> <a-col :span='8'> <span style='float: left;overflow: hidden;' class='table-page-search-submitButtons'> <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button> <a-button type='primary' @click='reset' icon='reload' style='margin-left: 8px'>重置</a-button> </span> </a-col> </a-row> </a-form> </div> <!-- 查询区域-END --> <!-- 操作按钮区域 --> <div class="table-operator"> <!-- <a-button @click="handleAdd" type="primary" icon="plus" v-if="indirectModal" :disabled="hiddenFlag">新增--> <!-- </a-button>--> <a-upload v-if="!hiddenFlag" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel"> <a-button type="primary" icon="import" :disabled="hiddenFlag">导入</a-button> </a-upload> <!-- <a-button icon='link' type='primary' @click='outmb' v-if="indirectModal" :disabled="hiddenFlag">--> <!-- 导入模板--> <!-- </a-button>--> <a-button icon='link' type='primary' @click='outmb1' :disabled="hiddenFlag"> 导入模板 </a-button> <a-button type="primary" @click="bacthSave" v-if="indirectModal" :disabled="hiddenFlag">保存</a-button> <a-button type="primary" @click="subStatus" v-if="indirectModal" :disabled="hiddenFlag">提交</a-button> <a-dropdown v-if='selectedRowKeys.length > 0'> <a-menu slot='overlay'> <a-menu-item key='1' @click='batchDelete'> <a-icon type='delete' /> 删除 </a-menu-item> </a-menu> <a-button style='margin-left: 8px'> 批量操作 <a-icon type='down' /> </a-button> </a-dropdown> </div> <!-- table区域-begin --> <div> <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">--> <!-- <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a--> <!-- style="font-weight: 600">{{ selectedRowKeys.length }}</a>项--> <!-- <a style="margin-left: 24px" @click="onClearSelected">清空</a>--> <!-- </div>--> <j-editable-table v-if="indirectModal" ref="editableTable" size="middle" bordered rowKey="id" :columns="dynamicColumns" :dataSource="dataSource" :rowNumber="true" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap" :actionButton="true" :disabledRows="{ status:1}" @change="handleTableChange"> <template v-slot:oemsSlot="props"> <a-input v-model='props.text' placeholder='请输入主机厂' :disabled="isDisabled(props)" @input="oemsInput(props)"> <a-icon slot='prefix' type='cluster' @click.stop='handleOemsClick(props)'/> </a-input> </template> <template v-slot:productSearchSlot="props"> <a-select v-model="props.text" show-search placeholder="请选择产品名称" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" style="width: 100%" @search="handleProductSearch" @change="handleProductChange(props)" > <a-select-option v-for="item in productList" :key="item.value" :value="item.value"> {{ item.text }} </a-select-option> </a-select> </template> <template v-slot:productSlot="props"> <j-search-select-tag v-model="props.text" placeholder="请选择产品名称" dict="bs_inventory GROUP BY cInvName, cInvName, cInvName" /> </template> <template v-slot:publishSlot="props"> <div> <a-input-search v-model="props.text" placeholder="请先选择用户" readOnly unselectable="on" @search="onSearchDepUser(props)"> <a-button slot="enterButton" :disabled="false">选择用户</a-button> </a-input-search> <j-select-user-by-dep-modal ref="selectModal" modal-width="80%" :multi="false" @ok="selectOK" :user-ids="props.value" @initComp="initComp"/> </div> </template> <span slot='titleSlot' slot-scope='text'> <j-ellipsis :value='text' :length='40'/> </span> </j-editable-table> <a-table v-else ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" class="j-table-force-nowrap" @change="handleTableChange"> <span slot='titleSlot' slot-scope='text'> <j-ellipsis :value='text' :length='40'/> </span> <span slot="action" slot-scope="text, record"> <a @click="handleEdit(record)" :disabled="!record.editBtn">编辑</a> <a-divider type="vertical"/> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a :disabled="!record.editBtn">删除</a> </a-popconfirm> </span> </a-table> </div> <indirectBusinessProducts-modal ref="modalForm" :indirectModal="indirectModal" @ok="modalFormOk"></indirectBusinessProducts-modal> <indirectBusinessProducts-item-modal ref="modalItemForm" @ok="modalFormOk"></indirectBusinessProducts-item-modal> <a-modal title='客户名称(主机厂)' :width='1000' :visible='cusVisible' @ok='handleCusSubmit' @cancel='closeCusModal' cancelText='关闭'> <cus-component ref='cusComponent'></cus-component> </a-modal> </a-card> </template> <script> import '@/assets/less/TableExpand.less' import {mixinDevice} from '@/utils/mixin' import {JeecgListMixin} from '@/mixins/JeecgListMixin' import IndirectBusinessProductsModal from './modules/IndirectBusinessProductsModal' import JEllipsis from "../../../components/jeecg/JEllipsis.vue"; import IndirectBusinessProductsItemModal from "./modules/IndirectBusinessProductsItemModal.vue"; import {deleteAction, downFile, getAction, postAction, putAction} from "../../../api/manage"; import {filterDictText, initDictOptions} from '@/components/dict/JDictSelectUtil' import {FormTypes} from '@/utils/JEditableTableUtil' import JEditableTable from "@comp/jeecg/JEditableTable.vue"; import CusComponent from "@views/modules/eoa/plan/components/CusComponent.vue"; import JSelectUserByDep from "@comp/jeecgbiz/JSelectUserByDep.vue"; import JSelectUserByDepModal from "@comp/jeecgbiz/modal/JSelectUserByDepModal.vue"; import JSearchSelectTag from "@comp/dict/JSearchSelectTag.vue"; export default { name: "IndirectBusinessProductsList", mixins: [JeecgListMixin, mixinDevice], components: { JSearchSelectTag, JSelectUserByDepModal, JSelectUserByDep, CusComponent, JEditableTable, IndirectBusinessProductsItemModal, JEllipsis, IndirectBusinessProductsModal }, props: { indirectFlag: { type: Boolean, default: false }, indirectModal: { type: Object, default: () => { } }, hiddenFlag: { type: Boolean, default: false }, }, data() { return { usernames: null, value: null, userIds: null, description: 'indirect_business_products管理页面', statusDictOptions: [], busType: 'my', cusVisible: false, // 表头 columns: [ { title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } }, // { // title: '客户名称(主机厂)', // align: "center", // dataIndex: 'oems' // }, { title: '客户名称', align: "center", dataIndex: 'endUser' }, { title: '终端用户', align: "center", dataIndex: 'oems', scopedSlots: {customRender: 'titleSlot'}, width: 100 }, { title: '车型(米)', align: "center", dataIndex: 'carType', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.vehicleModelOptions, text); } }, { title: '产品明细', align: "center", scopedSlots: {customRender: 'titleSlot'}, dataIndex: 'productDetails' }, { title: '发布数量', align: "center", dataIndex: 'number' }, { title: '预测金额', align: "center", dataIndex: 'redictedAmount' }, { title: '发布人', align: "center", dataIndex: 'publishName' }, { title: '发布时间', align: "center", dataIndex: 'publishTime', customRender: function (text) { return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text) } }, { title: '产品类型', align: "center", dataIndex: 'productType', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.productTypeOptions, text); } }, // { // title: '产品大类', // align: "center", // dataIndex: 'productCategories' // }, { title: '提交状态', align: "center", dataIndex: 'status', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.statusDictOptions, text); } }, { title: '操作', dataIndex: 'action', align: "center", // fixed:"right", width: 147, scopedSlots: {customRender: 'action'} } ], url: { list: "/indirect_business/products/list", delete: "/indirect_business/products/delete", deleteBatch: "/indirect_business/products/deleteBatch", setStatus: "/indirect_business/products/setStatus", batchAdd: "/indirect_business/products/batchAdd", teamExcelTemplate: "indirect_business/indirectBusiness/teamExcelTemplate", teamExcelTemplateProduct: "indirect_business/indirectBusiness/teamExcelTemplateProduct", importExcelUrl: "indirect_business/products/importExcel", }, dictOptions: {}, queryParam:{ status:'1' }, productList: [],//储存产品信息列表 currentClickRowId: null, // 存储当前点击的行ID } }, computed: { importExcelUrl: function () { if (!this.indirectModal) { return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`; } else { return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}?busId=${this.indirectModal.busId}&endUser=${this.indirectModal.endCustomer}`; } }, getLoginUsername() { return this.$store.getters.userInfo.username; }, loginPermissions() { return this.indirectModal.helpPerson.includes(this.$store.getters.userInfo.username); }, rowSelection() { return { onChange: (selectedRowKeys, selectedRows) => { this.onSelectChange(selectedRowKeys, selectedRows); }, getCheckboxProps: record => ({ props: { disabled: record.status === 1 || record.status === null }, }), }; }, dynamicColumns() { const baseColumns = [ { title: "busId", align: "center", key: "busId", type: FormTypes.hidden, defaultValue: this.indirectModal.busId }, // 动态客户名称列 { title: this.indirectModal.category === '1' ? '客户名称' : '终端客户名称', align: "center", key: 'endUser', type: FormTypes.input, placeholder: '请输入客户名称', disabled: true, defaultValue: this.indirectModal.endCustomer, width: '220px' } ]; if (this.indirectModal.category === '2'){ baseColumns.push({ title: '主机厂', align: "center", key: 'oems', placeholder: "请选择主机厂", type: FormTypes.slot, slotName: 'oemsSlot', validateRules: this.indirectModal.category === '2' ? [ { required: true, message: '主机厂不能为空' }, { validator: (rule, value, callback) => { if (value === '' || value === null || value === undefined) { callback(new Error('请选择主机厂')); // 配合 required 使用 } } } ] : [], width: '220px', }); } baseColumns.push({ title: '车型(米)', align: "center", key: 'carType', type: FormTypes.select, dictCode: 'vehicle_model', placeholder: '请选择车型', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.vehicleModelOptions, text); }, width: '150px' }) baseColumns.push({ title: '产品名称', align: "center", key: 'productDetails', placeholder: "请选择产品名称", type: FormTypes.slot, slotName: 'productSearchSlot', width: '240px' }) baseColumns.push({ title: '发布数量', align: "center", key: 'number', type: FormTypes.input, inputType: 'number', placeholder: "请输入发布数量", validateRules: [ { pattern: /^[1-9]\d*$/, // 正整数正则 message: '发布数量必须是正整数' } ], width: '150px' }) baseColumns.push({ title: '预测金额', align: "center", key: 'redictedAmount', type: FormTypes.input, inputType: 'number', placeholder: "请输入预测金额", // 动态校验规则(category == '2' 时必填且必须为正数) validateRules: this.indirectModal.category === '2' ? [ { required: true, message: '预测金额不能为空', trigger: ['blur', 'change'] // 触发校验的时机 }, { pattern: /^(0|[1-9]\d*)(\.\d+)?$/, // 正整数正则 message: '发布数量必须是正数' } ] : [], width: '150px' }) if (this.indirectModal.category === '2'){ baseColumns.push({ title: '主机厂负责人', align: "center", key: 'oemResponsiblePerson', type: FormTypes.hidden, }); } // if (this.indirectModal.category === '2'){ // baseColumns.push({ // title: '主机厂负责人', // align: "center", // key: 'oemResponsiblePersonName', // type: FormTypes.input, // disabled: true, // width: '200px' // }); // } baseColumns.push({ title: '发布人', align: "center", key: 'publishBy', type: FormTypes.hidden, defaultValue: this.$store.getters.userInfo.username, placeholder: "请选择发布人", width: '240px' }) baseColumns.push({ title: '发布人', align: "center", key: 'publishName', type: FormTypes.slot, slotName: 'publishSlot', defaultValue: this.$store.getters.userInfo.realname, placeholder: "请选择发布人", width: '240px' }) baseColumns.push({ title: '发布时间', align: "center", key: 'publishTime', type: FormTypes.date, customRender: function (text) { return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text) }, defaultValue: this.formatDate(new Date()), width: '170px' }) baseColumns.push({ title: '产品类型', align: "center", key: 'productType', placeholder: "请选择产品类型", type: FormTypes.select, dictCode: 'product_type', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.productTypeOptions, text); }, defaultValue: '0', width: '130px' }) baseColumns.push({ title: '提交状态', align: "center", key: 'status', type: FormTypes.select, dictCode: 'public_status', customRender: (text, record, index) => { //字典值替换通用方法 return filterDictText(this.statusDictOptions, text); }, defaultValue: '0', disabled: true, width: '130px' }) return baseColumns; }, }, methods: { initDictConfig() { getAction('/base/bsInventory/distinctAllList',null).then((res) => { if (res.success) { this.productList = res.result.map(item => ({ text: item.cinvname, value: item.cinvname })) } }) //判断查询条件 if (!this.indirectModal){ this.queryParam.status = 1 this.loadData(1) }else{ this.queryParam.busId = this.indirectModal.busId this.queryParam.status = '' this.loadData(1) } console.log('this.queryParam.status',this.queryParam.status) initDictOptions('public_status').then((res) => { if (res.success) { this.statusDictOptions = res.result } }) initDictOptions('vehicle_model').then((res) => { if (res.success) { this.vehicleModelOptions = res.result } }) initDictOptions('product_type').then((res) => { if (res.success) { this.productTypeOptions = res.result } }) }, // 产品名称远程搜索 handleProductSearch(value) { if (!value) return; // 空输入不查询 // 调用接口查询匹配的产品 getAction('/base/bsInventory/distinctAllList', { 'cinvname': value }).then(res => { if (res.success) { this.productList = res.result.map(item => ({ text: item.cinvname, value: item.cinvname })); } }); }, handleProductChange(props) { // 存储当前点击的行记录和ID this.currentClickRowId = props.rowId; this.$refs.editableTable.setValues([{ rowKey: this.currentClickRowId, values: { 'productDetails': props.text } }]); }, outmb() { downFile(this.url.teamExcelTemplate, '').then((res) => { if (!res) { this.$message.warning('文件下载失败') return } let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) let downloadElement = document.createElement('a') let href = window.URL.createObjectURL(blob) // 创建下载的链接 downloadElement.href = href downloadElement.download = '间接销售登记表导入模板.xls' // 下载后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 点击下载 document.body.removeChild(downloadElement) // 下载完成移除元素 window.URL.revokeObjectURL(href) // 释放掉blob对象 }) }, outmb1() { downFile(this.url.teamExcelTemplateProduct, '').then((res) => { if (!res) { this.$message.warning('文件下载失败') return } let blob = new Blob([res], {type: 'application/vnd.ms-excel'}) let downloadElement = document.createElement('a') let href = window.URL.createObjectURL(blob) // 创建下载的链接 downloadElement.href = href downloadElement.download = '间接销售登记导入模板.xlsx' // 下载后文件名 document.body.appendChild(downloadElement) downloadElement.click() // 点击下载 document.body.removeChild(downloadElement) // 下载完成移除元素 window.URL.revokeObjectURL(href) // 释放掉blob对象 }) }, subStatus(){ const ids = this.$refs.editableTable.getSelection() if (ids.length==0){ this.$message.warn("请选择一条记录") return; } const selectedRow = this.$refs.editableTable.getValuesSync({rowIds: ids}).values selectedRow.forEach(item => { if (item.status == "1"){ this.$message.warn("请选择未提交的数据") return; } }) let that = this that.$confirm({ title: '提示', content: '确认提交吗?', onOk: function() { putAction(that.url.setStatus, selectedRow).then((res) => { if (res.success) { that.$message.success(res.message); that.loadData(); that.onClearSelected(); } else { that.$message.warning(res.message); that.loadData(); } }) } }) }, bacthSave() { this.$refs.editableTable.getValues(error => { if (error === 0) { let that = this postAction(that.url.batchAdd, this.$refs.editableTable.getValuesSync().values).then((res) => { if (res.success) { that.$message.success(res.message); that.loadData(); } else { that.$message.warning(res.message); that.loadData(); } }) } else { this.$message.error('验证未通过') } }) }, reset(){ this.queryParam = {status:'1'} this.loadData() }, batchDelete: function () { if(!this.url.deleteBatch){ this.$message.error("请设置url.deleteBatch属性!") return } if (this.selectedRowKeys.length <= 0) { this.$message.warning('请选择一条记录!'); return; } else if (this.selectionRows.some(item => item.status != 0)) { this.$message.warning('请选择未提交记录!') return; } else { var ids = ""; for (var a = 0; a < this.selectedRowKeys.length; a++) { ids += this.selectedRowKeys[a] + ","; } var that = this; this.$confirm({ title: "确认删除", content: "是否删除选中数据?", onOk: function () { that.loading = true; deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => { if (res.success) { that.$message.success(res.message); that.loadData(); that.onClearSelected(); } else { that.$message.warning(res.message); } }).finally(() => { that.loading = false; }); } }); } }, handleCusSubmit() { if (!this.$refs.cusComponent.selectionRows || this.$refs.cusComponent.selectionRows.length === 0) { this.$message.warning('请选择一条记录') return false } var customerNames = ""; var oemResponsiblePerson = ""; var oemResponsiblePersonName = ""; for (var a = 0; a < this.$refs.cusComponent.selectedRowRecords.length; a++) { customerNames += this.$refs.cusComponent.selectedRowRecords[a].customerName + ","; if (this.$refs.cusComponent.selectedRowRecords[a].responsiblePerson !== null) { oemResponsiblePerson += this.$refs.cusComponent.selectedRowRecords[a].responsiblePerson + ","; } if (this.$refs.cusComponent.selectedRowRecords[a].responsiblePersonName!==null){ oemResponsiblePersonName += this.$refs.cusComponent.selectedRowRecords[a].responsiblePersonName + ","; } } const oems = customerNames.substr(0,customerNames.length-1) const oemResponsiblePersons = oemResponsiblePerson.substr(0,oemResponsiblePerson.length-1) const oemResponsiblePersonNames = oemResponsiblePersonName.substr(0,oemResponsiblePersonName.length-1) // 找到当前点击的行并更新数据 this.$refs.editableTable.setValues( [{ rowKey: this.currentClickRowId, values: { 'oems': oems, 'oemResponsiblePerson': oemResponsiblePersons, 'oemResponsiblePersonName': oemResponsiblePersonNames, } }] ) this.closeCusModal() }, oemsInput(props) { // 存储当前点击的行记录和ID this.currentClickRowId = props.rowId; // 找到当前点击的行并更新数据 this.$refs.editableTable.setValues( [{ rowKey: this.currentClickRowId, values: { 'oems': props.text } }] ) }, handleOemsClick(props) { console.log("主机厂",this.$refs.editableTable.getValues({rowIds: props.rowId})) // 存储当前点击的行记录和ID this.currentClickRowId = props.rowId; this.openCusModal(); // 直接打开弹窗 }, openCusModal() { this.cusVisible = true }, closeCusModal() { this.$refs.cusComponent.selectionRows = [] this.$refs.cusComponent.selectedRowKeys = [] this.$refs.cusComponent.queryParam = {} this.cusVisible = false }, formatDate(date) { const year = date.getFullYear() const month = (date.getMonth() + 1).toString().padStart(2, '0') const day = date.getDate().toString().padStart(2, '0') return `${year}-${month}-${day}` }, initComp(userNames) { this.userNames = userNames }, onSearchDepUser(props) { this.currentClickRowId = props.rowId if (this.isSelectUser) this.$refs.selectModal.queryParam.username = this.value; this.$refs.selectModal.showModal() this.$refs.selectModal.queryParam.username = ""; }, selectOK(rows, idstr) { if (!rows) { this.userNames = '' this.userIds = '' } else { let temp = '' for (let item of rows) { temp += ',' + item.realname } this.userNames = temp.substring(1) this.userIds = idstr // 找到当前点击的行并更新数据 this.$refs.editableTable.setValues( [{ rowKey: this.currentClickRowId, values: { 'publishBy': this.userIds, 'publishName': this.userNames, } }] ) } }, // 判断是否禁用 isDisabled(props){ const item = this.$refs.editableTable.getValuesSync({rowIds: [props.rowId]}) return item.values[0].status === '1' } } } </script> <style scoped> @import '~@assets/less/common.less'; .isShowStyle /deep/ .ant-card-body { padding: unset; } </style>中<template v-slot:oemsSlot="props"> <a-input v-model='props.text' placeholder='请输入主机厂' :disabled="isDisabled(props)" @input="oemsInput(props)"> <a-icon slot='prefix' type='cluster' @click.stop='handleOemsClick(props)'/> </a-input> </template>插槽的:disabled怎么使用,我想根据本条记录的status判断是否禁用
最新发布
07-23
<think>我们有一个需求:在Vue组件的插槽中,根据当前记录的status字段动态设置<a-input>的disabled状态。 根据引用[1]中提到的,对于input元素,disabled属性需要单独处理,并且我们可以通过计算属性或者动态绑定来处理。 具体思路: 1. 在插槽中,我们可以访问到当前行的记录(通常为record或row)。 2. 我们可以根据当前记录的status字段的值来判断是否禁用(disabled)。 3. 使用Vue的动态属性绑定(v-bind)来设置disabled属性。 假设我们有一个表格组件,其中使用插槽自定义了某一列的内容,并且该插槽提供了当前行的记录(record)作为作用域插槽的参数。 示例代码可能如下: ```vue <template> <a-table :dataSource="data"> <!-- 其他列 --> <a-table-column title="操作"> <template slot-scope="record"> <a-input :disabled="record.status === 0"></a-input> </template> </a-table-column> </a-table> </template> ``` 但是,注意引用[1]中提到,对于input的disabled属性,需要特殊处理,因为可能会受到表单的disabled状态影响。所以,我们这里直接绑定到组件的disabled属性上即可。 然而,根据引用[3]中的示例,我们看到在表单中动态改变表单项的显示和隐藏,使用了类似的方法。我们可以借鉴这个思路。 因此,我们可以这样写: :disabled="record.status === 0" // 假设0表示禁用 注意:record是当前行的数据对象,status是其中的一个字段。根据需求,当status为0时,我们禁用输入框。 但是,如果我们的记录中status可能有多个值,需要根据具体业务逻辑判断。例如,引用[2]中有一个下拉框的状态数据:0表示已禁用,1表示已启用。那么我们可以这样写: :disabled="record.status === 0" 这样,当记录的状态为0(已禁用)时,输入框将被禁用。 另外,如果我们的输入框是在表单内部,并且整个表单可能被禁用,那么根据引用[1],我们需要考虑表单的disabled状态。但是,在插槽中,我们通常只关注当前行的状态。如果同时需要考虑表单的禁用状态,我们可以这样写: :disabled="formDisabled || record.status === 0" 其中,formDisabled是表单的禁用状态(如果有的话)。 但是,根据问题描述,我们只需要根据当前记录的status字段判断。所以,我们只需要绑定record.status即可。 因此,在插槽中,我们可以这样写: ```vue <template slot-scope="record"> <a-input :disabled="record.status === 0" /> </template> ``` 注意:在Ant Design Vue中,作用域插槽的参数可能是一个对象,其中包含当前行的数据。在a-table-column中,slot-scope的参数通常就是当前行的数据对象(record)。但是,不同版本的Ant Design Vue可能有所不同,请根据实际情况调整。 如果使用的是新版本的Ant Design Vue(v2.x),则作用域插槽的写法可能有所不同。例如: ```vue <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'action'"> <a-input :disabled="record.status === 0" /> </template> </template> ``` 总之,核心就是获取到当前行的record,然后根据record.status的值来设置disabled属性。 另外,如果record.status可能是字符串类型的'0',那么我们需要使用record.status === '0'。所以,确保比较的类型一致。 总结:在Vue中,我们可以通过动态绑定:disabled属性,并根据当前行的status字段的值来设置布尔值,从而实现动态禁用。</think>在 Vue 中根据数据行的 `status` 字段动态设置 `<a-input>` 的禁用状态,可以通过以下方式实现: ### 解决方案(使用动态绑定) ```vue <template> <a-table :data-source="data"> <!-- 其他列 --> <a-table-column title="操作"> <template #default="{ record }"> <!-- 根据 status 动态设置 disabled --> <a-input :disabled="record.status === 0" // 当 status 为 0 时禁用 v-model="record.value" /> </template> </a-table-column> </a-table> </template> <script> export default { data() { return { data: [ { id: 1, status: 0, value: '禁用状态' }, // status=0 禁用 { id: 2, status: 1, value: '启用状态' } // status=1 启用 ] } } } </script> ``` ### 关键点说明 1. **作用域插槽获取行数据**: ```vue <template #default="{ record }"> ``` 通过作用域插槽获取当前行的 `record` 对象 2. **动态绑定 disabled 属性**: ```vue :disabled="record.status === 0" ``` - 使用 `v-bind` 简写 `:` 动态绑定属性 - 当 `status` 值为 0 时返回 `true`(禁用) - 其他状态返回 `false`(启用) 3. **状态值处理**(根据引用[2]优化): ```javascript statusSelectData: [ { name: "已禁用", value: 0 }, { name: "已启用", value: 1 } ] ``` 建议将状态值定义为常量,便于维护 ### 完整组件示例 ```vue <template> <a-table :data-source="dataSource"> <a-table-column title="ID" data-index="id" /> <a-table-column title="状态"> <template #default="{ record }"> <a-tag :color="record.status === 1 ? 'green' : 'red'"> {{ record.status === 1 ? '启用' : '禁用' }} </a-tag> </template> </a-table-column> <a-table-column title="操作"> <template #default="{ record }"> <a-input :disabled="record.status === 0" v-model="record.value" placeholder="请输入内容" /> </template> </a-table-column> </a-table> </template> <script> export default { data() { return { dataSource: [ { id: 1, status: 0, value: '内容1' }, { id: 2, status: 1, value: '内容2' }, { id: 3, status: 0, value: '内容3' } ], // 状态映射(引用[2]的优化) statusMap: { 0: '已禁用', 1: '已启用' } } } } </script> ``` ### 注意事项 1. **引用[1]的特殊处理**:如果输入框在表单中,需额外处理 `form.disabled` 的优先级 2. **引用[3]的动态控制**:可通过类似 `handleCategoryChange` 的方法在状态变化时更新其他属性 3. **性能优化**:对于大数据量表格,建议使用计算属性缓存状态判断
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值