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

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 }"
    />