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

news2025/1/12 1:50:34

 <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-drawer
    title="物品入库"
    :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 = false
      this.form.resetFields()
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    handleSubmit () {
      let price = 0
      this.dataList.forEach(item => {
        price += item.price * item.amount
      })
      this.form.validateFields((err, values) => {
        values.price = price
        values.goods = JSON.stringify(this.dataList)
        if (!err) {
          this.loading = true
          this.$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.coloradmin.cn/o/1288346.html

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

相关文章

回溯算法:复原IP地址 子集 子集II

93.复原IP地址 思路&#xff1a; 与分割回文串相似&#xff0c;复原ip地址是将给定字符串分割成点分十进制的四段&#xff0c;切割问题就可以使用回溯搜索法把所有可能性搜出来。回溯三部曲&#xff1a; 递归参数&#xff1a;除了传入的需要分割的字符串&#xff0c;仍然需要…

介绍几个有意思的 GitHub 仓库

大家好&#xff0c;我是风筝。 今天介绍几个很有意思的 github 开源项目&#xff0c;看过之后就会发现&#xff0c;github 果然深意暗藏。 GitHub对于程序员来说&#xff0c;再熟悉不过了&#xff0c;绝大多数时候&#xff0c;我们到上面都是为了学习高质量的源代码&#xff…

Windows循环检测,直到网络通/断后执行指定命令

前言 前几天&#xff0c;一个朋友让我帮他做个脚本或者批处理&#xff0c;要实现的功能很简单&#xff1a;开机时检测网络是否联通&#xff0c;如果联通了就执行一个指定的程序&#xff0c;然后脚本就可以退出了。 批处理的解决方法 手动操作时&#xff0c;我们通常使用ping…

【hacker送书第9期】算法训练营(入门篇)

第9期图书推荐 内容简介作者简介精彩书评图书目录概述参与方式 内容简介 本书以海量图解的形式&#xff0c;详细讲解常用的数据结构与算法&#xff0c;又融入大量的竞赛实例和解题技巧。通过对本书的学习&#xff0c;读者可掌握12种初级数据结构、15种常用STL函数、10种二叉树和…

HarmonyOS鸿蒙操作系统架构

目录 1. 分布式架构&#xff1a; 2. 统一的开发平台&#xff1a; 3. 多内核共享&#xff1a; 4. 自适应界面&#xff1a; 5. AR、VR、MR支持&#xff1a; 6. 安全和隐私保护&#xff1a; 7. AI集成&#xff1a; 8. 应用生态系统&#xff1a; 9. 开源和开放&#xff1a…

Maxwell学习笔记

1 概述 Maxwell 是由美国 Zendesk 开源&#xff0c;用 Java 编写的 MySQL 实时抓取软件。 实时读取MySQL 二进制日志 Binlog&#xff0c;并生成 JSON 格式的消息&#xff0c;作为生产者发送给 Kafka&#xff0c;Kinesis、RabbitMQ、Redis、Google Cloud Pub/Sub、文件或其它平台…

webpack学习-2.管理资源

webpack学习-2.管理资源 1.这章要干嘛2.加载css注意顺序&#xff01; 3.总结 1.这章要干嘛 管理资源&#xff0c;什么意思呢&#xff1f;管理什么资源&#xff1f;项目中经常会 导入各种各样的css文件&#xff0c;图片文件&#xff0c;字体文件&#xff0c;数据文件等等&#…

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之文件管理(3)》(24)

《Linux操作系统原理分析之文件管理&#xff08;3&#xff09;》&#xff08;24&#xff09; 7 文件管理7.5 文件存储空间的管理7.6 文件的共享和保护7.6.1 文件存取控制7.6.2 文件共享的实现方法7.6.3 文件的备份转储 7 文件管理 7.5 文件存储空间的管理 位示图 对每个磁盘…

使用 PyTorch 完全分片数据并行技术加速大模型训练

本文&#xff0c;我们将了解如何基于 PyTorch 最新的 完全分片数据并行 (Fully Sharded Data Parallel&#xff0c;FSDP) 功能用 Accelerate 库来训练大模型。 动机 &#x1f917; 随着机器学习 (ML) 模型的规模、大小和参数量的不断增加&#xff0c;ML 从业者发现在自己的硬件…

harmony开发之image组件的使用

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。 在传统的单设备系统能力基础上&#xff0c;HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念&#xff0c;能够支持手机、平板、智能穿戴、智慧屏、车机、PC、智能音箱、耳机、AR/VR眼镜等多种终端…

在KeyarchOS上体验WildFly

一、浪潮信息KeyarchOS简单介绍 KeyarchOS具备稳定可靠、高效软硬协同、全天候运维、安全可信等特性,增强了对云计算、人工智能等场景的支持,性能稳定性领先,生态完善,符合金融、政务、能源、交通、通信、教育、医疗等关键行业的应用要求。具备非常广泛的应用。 官方地址&…

BACnet I/O模块在水利环境监测全自动控制系统中的应用:稳定、高效、实时

前言 “绿水青山就是金山银山”&#xff0c;水利环境一直是国际生态部门关注的重点。随着经济的发展、针对水利环境的监管也日趋严格&#xff0c;尤其是重点河、湖水系、水源地、城市内河等成为重点监管对象&#xff0c;监管力度也愈来愈严格&#xff0c;监测布点密度不断加大。…

linux交换分区管理SWAP

6.2.5 交换分区管理SWAP 6.2.5.1 概念 作用&#xff1a; ”提升“内存容量&#xff0c;防止OOM&#xff08;out of memory&#xff0c;内存溢出&#xff09;。 ​ 对应windows中的虚拟内存。 ​ 从功能上讲&#xff0c;交换分区主要是在内存不够用的时候&#xff0c;将部分内…

【Azure 架构师学习笔记】- Azure Databricks (2) -集群

本文属于【Azure 架构师学习笔记】系列。 本文属于【Azure Databricks】系列。 接上文 【Azure 架构师学习笔记】- Azure Databricks (1) - 环境搭建 前言 在上文中提到了ADB 的其中一个核心就是集群&#xff0c;所以这里专门研究一下ADB 的集群。 ADB 集群 首先了解一下ADB…

git 使用记录

远程仓库为空初始化 初始化本地仓库 git init 在本地仓库书写代码&#xff08;这里可以编辑一个文本文件做测试&#xff0c;如hello.txt&#xff09; 5&#xff09;执行&#xff1a;git add 要让git管理的文件&#xff08;git add hello.txt&#xff09;>执行完此操作将我…

【Linux】Linux基础

文章目录 学习目标操作系统不同应用领域的主流操作系统虚拟机 Linux系统的发展史Linux内核版和发行版 Linux系统下的文件和目录结构单用户操作系统vs多用户操作系统Windows和Linux文件系统区别 Linux终端命令格式终端命令格式查阅命令帮助信息 常用命令显示文件和目录切换工作目…

数据湖和中央数据仓库的设计

设计数据湖或中央数据仓库是许多大型组织的主要职能&#xff0c;这些组织每天处理数百万笔交易&#xff0c;并对这些交易进行进一步的报告、预测或机器学习项目分析。 为了将所有来自源系统&#xff08;我们称之为“上游”&#xff09;到其他业务应用&#xff08;所谓“下游”&…

解决(error) ERR Errors trying to SHUTDOWN. Check logs.问题~

该问题出现在我在使用shutdown关闭redis服务器时&#xff0c;出现该问题的原因是由于配置文件的日志文件位置未配置或者缺少日志文件 我自己出现该问题是因为缺少日志文件&#xff0c;解决步骤如下所示&#xff1a; 第一步&#xff1a;在该目录下使用touch命令创建日志文件 第…

测绘资质测绘设备检定、校准管理制度

测绘设备检定、校准管理制度 建立健全测绘仪器设备检定、校准管理制度&#xff0c;明确测绘仪器设备的检定、校准、日常管理等要求

Kafka安装与配置-shell脚本一键安装配置(单机版)

文章目录 前言使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 执行脚本4. 加载用户环境变量5. 启动/停止Kafka内置zookeeper6. 启动/停止Kafka单机版 总结 前言 本文介绍了使用Shell脚本一键安装Kafka的方法。通过复制脚本并执行&#xff0c;可以自动下载、安装和配置Kaf…