Ant Design Vue(v1.7.8)a-table组件的插槽功能

 <template slot="unitShow" slot-scope="text, record">

slot="unitShow" 表示插槽名(见具名插槽)

slot-scope="text, record" 表示作用域插槽接收从<a-table>组件传递进来的两个参数,其中:

text是<a-table>组件定义的 当前插槽slot="unitShow"对应的数据项'unit'的文本值

{title: '单位',dataIndex: 'unit',scopedSlots: {customRender: 'unitShow'}
},

 record是<a-table>组件定义的 当前行的全部数据

通过输出{{ text }}和{{ record }}可以看出:

              <h4>text内容{{ text }}</h4>

              <h4>record内容{{ record }}</h4>

<template><a-drawertitle="物品入库":maskClosable="false"placement="right":closable="false":visible="show":width="1200"@close="onClose"style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;"><a-form :form="form" layout="horizontal"><a-row :gutter="32"><a-col :span="12"><a-form-item label='保管人' v-bind="formItemLayout"><a-input v-decorator="['custodian',{ rules: [{ required: true, message: '请输入保管人!' }] }]"/></a-form-item></a-col><a-col :span="12"><a-form-item label='入库人' v-bind="formItemLayout"><a-input v-decorator="['putUser',{ rules: [{ required: true, message: '请输入入库人!' }] }]"/></a-form-item></a-col><a-col :span="24"><a-form-item label='备注消息' v-bind="formItemLayout"><a-textarea :rows="4" v-decorator="['content',{ rules: [{ required: true, message: '请输入名称!' }] }]"/></a-form-item></a-col><a-col :span="24"><a-table :columns="columns" :data-source="dataList"><template slot="nameShow" slot-scope="text, record"><a-input v-model="record.name"></a-input></template><template slot="typeShow" slot-scope="text, record"><a-input v-model="record.type"></a-input></template><template slot="typeIdShow" slot-scope="text, record"><a-select v-model="record.typeId" style="width: 100%"><a-select-option v-for="(item, index) in consumableType" :value="item.id" :key="index">{{ item.name }}</a-select-option></a-select></template><template slot="unitShow" slot-scope="text, record"><h4>text内容{{ text }}</h4><h4>record内容{{ record }}</h4><a-input v-model="record.unit"></a-input></template><template slot="amountShow" slot-scope="text, record"><a-input-number v-model="record.amount" :min="1" :step="1"/></template><template slot="priceShow" slot-scope="text, record"><a-input-number v-model="record.price" :min="1"/></template></a-table><a-button @click="dataAdd" type="primary" ghost size="large" style="margin-top: 10px;width: 100%">新增物品</a-button></a-col></a-row></a-form><div class="drawer-bootom-button"><a-popconfirm title="确定放弃编辑?" @confirm="onClose" okText="确定" cancelText="取消"><a-button style="margin-right: .8rem">取消</a-button></a-popconfirm><a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button></div></a-drawer>
</template><script>
import {mapState} from 'vuex'
const formItemLayout = {labelCol: { span: 24 },wrapperCol: { span: 24 }
}
export default {name: 'stockAdd',props: {stockAddVisiable: {default: false}},computed: {...mapState({currentUser: state => state.account.user}),show: {get: function () {return this.stockAddVisiable},set: function () {}},columns () {return [{title: '物品名称',dataIndex: 'name',scopedSlots: {customRender: 'nameShow'}}, {title: '型号',dataIndex: 'type',scopedSlots: {customRender: 'typeShow'}}, {title: '数量',dataIndex: 'amount',scopedSlots: {customRender: 'amountShow'}}, {title: '所属类型',dataIndex: 'typeId',width: 200,scopedSlots: {customRender: 'typeIdShow'}}, {title: '单位',dataIndex: 'unit',scopedSlots: {customRender: 'unitShow'}}, {title: '单价',dataIndex: 'price',scopedSlots: {customRender: 'priceShow'}}]}},mounted () {this.getConsumableType()},data () {return {dataList: [],formItemLayout,form: this.$form.createForm(this),loading: false,consumableType: []}},methods: {getConsumableType () {this.$get('/cos/consumable-type/list').then((r) => {this.consumableType = r.data.data})},dataAdd () {this.dataList.push({name: '', type: '', typeId: '', unit: '', amount: '', price: ''})},reset () {this.loading = falsethis.form.resetFields()},onClose () {this.reset()this.$emit('close')},handleSubmit () {let price = 0this.dataList.forEach(item => {price += item.price * item.amount})this.form.validateFields((err, values) => {values.price = pricevalues.goods = JSON.stringify(this.dataList)if (!err) {this.loading = truethis.$post('/cos/stock-info/put', {...values}).then((r) => {this.reset()this.$emit('success')}).catch(() => {this.loading = false})}})}}
}
</script><style scoped></style>

参考


Ant Design Vue封装a-drawer
https://1x.antdv.com/components/drawer-cn/

a-form
https://1x.antdv.com/components/form-cn/#components-form-demo-advanced-search

a-col a-row
https://1x.antdv.com/components/grid-cn/

<a-row :gutter="50">
https://1x.antdv.com/components/grid-cn/#components-grid-demo-grid-gutter

a-table
https://1x.antdv.com/components/table-cn/

vue slot插槽
P102102_尚硅谷Vue技术_默认插槽
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=102
P103103_尚硅谷Vue技术_具名插槽
P104104_尚硅谷Vue技术_作用域插槽
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/201198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS8下的JDK安装

一、JDK简介 &#xff08;一&#xff09;JDK、JRE、JVM、JIT 1、JDK&#xff08;Java Development kit&#xff09;&#xff0c;针对Java开发人员的产品&#xff0c;它包括了Java运行环境JRE、Java工具和Java基础类库&#xff0c;是java开发工具包。 java标准版开发工具包&am…

机器连接和工业边缘计算

软件应用和IT创新是制造业投资的主要驱动力。解决方案架构应围绕特定标准进行整合&#xff0c;并采用架构蓝图和最佳实践来满足最终用户的需求。此外&#xff0c;边缘计算&#xff08;Edge Computing&#xff09;也将在制造业中加速部署。 边缘计算是制造业的下一个变革驱动力。…

电商系统重要概念SPU、SKU、基本属性、销售属性

1. 什么是SPU&#xff1f;什么是SKU&#xff1f; SPU 和 SKU 是两个常用于零售和库存管理的术语&#xff0c;它们分别代表了不同的商品分类层次。 SPU&#xff08;Standard Product Unit&#xff0c;标准产品单元&#xff09;&#xff1a;SPU 指的是一种基于其功能或属性进行分…

解决vue ssr服务端渲染运行时报错:net::ERR_PROXY_CONNECTION_FAILED

现象&#xff1a; 从代码里找了半天也没有找到问题&#xff0c;但是由于ssr服务端渲染配置本身非常复杂&#xff0c;步骤又繁琐&#xff0c; 而且报错又很多&#xff0c;不知道哪里出了问题。 感觉是header或者cookie丢失造成的&#xff0c;因为据说ssr本身有这样的缺陷&…

Python---对象的属性添加与获取

1、什么是属性 在Python中&#xff0c;任何一个对象都应该由两部分组成&#xff1a;属性 方法 属性即是特征&#xff0c;比如&#xff1a;人的姓名、年龄、身高、体重…都是对象的属性。 车的品牌、型号、颜色、载重量...都是对象的属性。 对象属性既可以在类外面添加和获…

CCKS2023-面向金融领域的主体事件检测-亚军方案分享

赛题分析 大赛地址 https://tianchi.aliyun.com/competition/entrance/532098/introduction?spma2c22.12281925.0.0.52b97137bpVnmh 任务描述 主体事件检测是语言文本分析和金融领域智能应用的重要任务之一&#xff0c;如在金融风控领域往往会对公司主体进行风险事件的检测…

uniapp的subnvue苹果适配(ios)谷歌地图问题

谷歌地图&#xff0c;google地图&#xff0c;调整宽度。这个适配花了点时间&#xff0c;苹果IOS宽度一直无效失灵&#xff0c;赶紧记录分享&#xff0c;很坑。可能所有的ios的subnvue适配都这样。看了网上很多方法无效&#xff0c;最终找到试出答案。 pages.json的配置宽度无效…

logging 日志完整应用实例

日志文件函数&#xff1a;日志相关设置 logfile.py import logging def logg():# LOG_FORMAT "%(asctime)s - %(levelname)s - %(message)s"LOG_FORMAT "%(asctime)s - %(levelname)s - %(filename)s, line:%(lineno)d - %(message)s" # 带有文件名、行…

Linux使用root用户安装完MySQL软件后,配置MySQL这个普通用户登录

在 Linux 系统中&#xff0c;当您使用 root 用户安装 MySQL 后&#xff0c;系统会自动创建一个名为 mysql 的系统用户。这个 mysql 用户主要用于管理 MySQL 服务的运行&#xff0c;通常是没有登录系统的权限的。如果您希望使这个 mysql 用户能够登录到系统&#xff0c;您需要设…

解决ssr服务端渲染程序启动报错: ReferenceError: location is not defined

现象&#xff1a; 原因&#xff1a;chatgpt给出的解释很到位&#xff1a; 该错误表明代码尝试访问 location 对象&#xff0c;该对象通常在浏览器环境中可用。 然而&#xff0c;你的服务器端代码正在 Node.js 环境中运行&#xff0c;而在这个环境中 location 对象未定义。 问…

【总结】ES 7.x 配置用户名和密码访问(亲测可用)

目录 1.关闭es分片迁移2.修改配置文件,开启x-pack验证3.重启elasticsearch服务4.生成CA授权证书,配置certs5.修改es配置文件,追加以下内容6.再次重启ES每个节点。7.执行设置用户名和密码的命令8.最后放开es分片迁移9.FQA9.1 Postman 访问不了ES9.2 curl 访问不了ES9.3 elast…

踩坑记录:uniapp中scroll-view的scroll-top不生效问题;

情景描述&#xff1a; 最近在uniapp项目中用到scroll-view内置组件&#xff0c;有需求是在页面下拉刷新后&#xff0c;让scroll-view组件区域的显示内容置顶&#xff0c;也就是scroll-view区域的内容恢复不滑动的状态&#xff1b; 补充&#xff1a;下拉刷新操作scroll-view组件…

案例046:基于微信小程序的云上考场

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

22.括号生成

​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;22. 括号生成 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 当只有一对括号时&#xff0c;结果为 "()"&#xff0c;当有 n(n>1) 对括号时&#xff0c;其结果是在 n-1 对括号的…

DNS协议(DNS规范、DNS报文、DNS智能选路)

目录 DNS协议基本概念 DNS相关规范 DNS服务器的记录 DNS报文 DNS域名查询的两种方式 DNS工作过程 DNS智能选路 DNS协议基本概念 DNS的背景 我们知道主机通信需要依靠IP地址&#xff0c;但是每次通过输入对方的IP地址和对端通信不够方便&#xff0c;IP地址不好记忆 因此提…

java实现根据远程url下载文件到浏览器

本文提供 java实现根据远程url下载文件到浏览器片段代码&#xff0c;仅供参考。 可以实现&#xff0c;根据远程url地址下载推送至浏览器下载&#xff0c;这个方法可以解决因前端直接调用远程url下载出现的跨域问题。 /*** 根据远程url下载文件* param url 远程URL* param resp…

pytorch学习5-最大池化层的使用

系列文章目录 pytorch学习1-数据加载以及Tensorboard可视化工具pytorch学习2-Transforms主要方法使用pytorch学习3-torchvisin和Dataloader的使用pytorch学习4-简易卷积实现pytorch学习5-最大池化层的使用pytorch学习6-非线性变换&#xff08;ReLU和sigmoid&#xff09;pytorc…

如何零成本创建微信公众号版的自助查券返利机器人?

如何零成本创建微信公众号版的自助查券返利机器人&#xff1f; 在当今的电商时代&#xff0c;网购已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;寻找商品优惠券和返利却是一件让人头疼的事情。为了解决这个问题&#xff0c;我们可以借助微信公众号和微赚淘客系统…

微信淘宝客自动查券找券返利机器人实现的原理和思路探索

微信淘宝客自动查券找券返利机器人实现的原理和思路探索 在当今的电商时代&#xff0c;网购已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;寻找商品优惠券和返利却是一件让人头疼的事情。为了解决这个问题&#xff0c;我们可以借助微信公众号和微赚淘客系统来实现…

群体遗传 — 核苷酸多样性π

群体遗传 — 核苷酸多样性π **核苷酸多样性&#xff08;nucleotide diversity&#xff09;&#xff0c;记为π&#xff0c;是分子遗传学中一个重要的概念&#xff0c;用于量化种群内部或不同种群间的遗传多样性。**这一概念由根井正利和李文雄在 1979 年提出。核苷酸多样性的…