vue3+antd+customRender在Table当中动态渲染组件

努力的阿皓

已于 2024-07-11 15:14:41 修改

阅读量3.7k

点赞数 17

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-02-04 16:02:12 首次发布

本文链接：https://blog.youkuaiyun.com/2201_75874827/article/details/136027356

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用AntDesignVue库创建一个响应式的table组件，通过customRender实现动态调整总库存功能，并使用h函数和props进行数据绑定及方法调用。

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

1、首先需要自己安装好antdesign组件库

2.然后引入需要的组件例如说import {InputNumber} from 'ant-design-vue'

还需要引入 import {h} from 'vue'

3.table组件需要定义响应式的columns每一个对象代表一个属性

4. 在对应属性当中利用自定义渲染的组件实现对应的逻辑，这里就用到了h+customRender

这里的value就是动态绑定的值，然后

需要使用对应的组件只需要引入然后再这个h函数里面使用（组件不需要加引号）

需要使用对应的方法就直接在这个return返回的对象里面定义（record代表每行数据）

下面附着代码

//引入
import { h } from 'vue'
import {  InputNumber, Button } from 'ant-design-vue'


//定义
const state=reactive({
   columns1:[
    {
      title: '调整后总库存',
      width: 120,
      dataIndex: 'changeActQty',
      align: 'center',
      customRender: ({ record, index }) => {
        const InputStyle={};
        return h(InputNumber, {
          placeholder: '请输入',
          min: 0,
          precision: 0,
          style: InputStyle,
          value: record.changeActQty,
          onChange: (e) => {
            record.changeActQty = e
            const str = record.changeActQty - record.totalMaterialAmount
            record.countActQty = str > 0 ? '+' + str : str
            // 直接更新数组中的元素
            state.queryTable1[index] = { ...record }
          },
        })
      },
    }
   ]
})



//使用
<a-table
      stripe
      :pagination="false"
      :columns="state.columns1"
      :data-source="state.queryTable1"
      :scroll="{ x: 1000 }"
    />