h()中 input与select

前言

 先看一下数据类型

const columns = [

        // ...

        {
            label: "表头",  // el-table的表头
            propName: "fieldName",   // 某一列 对应的字段名称
            formatter: (row, col, value, index) => {  // 用来格式化内容
            }
        },

        // ...

]

注：下面案例都以红色 { } 里的内容为例:

 一、input

1."input"

{
    label: "表头",  // el-table的表头
    propName: "fieldName",   // 某一列 对应的字段名称
    formatter: (row, col, value) => {  // 用来格式化内容
        return h(
            "input",
            {
                value: value,
                style: "width: 100px",
                onInput: (e) => {
                    row.fieldName = (e.target as HTMLInputElement).value
                },
            }
        )
    }
},

或者引用 element-plus 的组件

2.ElInput

import { ElInput } from "element-plus"  // 使用之前记得引用组件

{
    label: "测试",
    propName: "test",
    formatter: (row, col, value) => {
        return h(
            ElInput,
            {
                placeholder:"请输入",
                style:"width: 125px",
                // ref:inputRef,
                modelValue:value,
                onInput: (val) => { row.test= val}
            }
        )
    }
},

二、select

1."select"

{
    label: "表头",
    propName: "fieldName",
    formatter: (row, col, value) => {
        return h('select', {  
                value: value,
                onChange: (e) => { 
                    row.fieldName = (e.target as HTMLInputElement).value
                }
            },
            [  
                h('Option',{  
                    props: {  
                        value: '1'  
                    }  
                },'option1'),  
                h('Option',{  
                    props: {  
                        value: '2'  
                    }  
                },'option2')  
            ]  
        );  
    }
},

如果想使用对象数组，则可以这样

const volumeNames = [
    { label: '张三', value: '111111' },
    { label: '李四', value: '222222' },
    { label: '王五', value: '333333' },
]

{
    label: "姓名",
    propName: "name",
    formatter: (row, col, value) => {
        return h(
            'select', 
             {  
                value: value,
                onChange: (e) => { 
                    console.log(e);
                    
                    row.name = (e.target as HTMLInputElement).value
               }

            },  
            volumeNames.map(function(item){  
                return h('Option', {  
                    props: {value: item.value}  
                }, item.label);  
            }) 
        );  
    }
},

2.ElSelect

import { ElSelect, ElOption } from "element-plus"

const volumeNames = [
    { label: '张三', value: '111111' },
    { label: '李四', value: '222222' },
    { label: '王五', value: '333333' },
]


{
    label: "姓名",
    propName: "name",
    formatter: (row, col, value) => {
        return h(
            ElSelect, 
            {
                modelValue: value, 
                onChange: (val) => { 
                    console.log(val);
                    row.name = val
                }

            },  
            volumeNames.map(option => h(ElOption, { label: option.label, value: option.value }))
        );  
    }
},

三、扩展

当然，h() 函数中不止 input、select，其他"p"、"div"、"button"等等都可以使用

需要注意的是

• 在使用 element 组件时，需要使用 modelValue 绑定对象

• 添加一个 onInput 方法来更新绑定对象的值【这里不一定是 onInput  (onClick、 onChange...)，要根据使用的组件灵活使用】，如果没有这一步会导致无法输入

1."span"

formatter(row, column, cellValue) {
   return h(
    "span",
     {
          style: {
            color: "#F90E39",
          },
      },
      rateFormatter(cellValue)
   )
},

2. ElRadioGroup

import { ElRadioGroup, ElRadio } from "element-plus"


formatter: (row, col, value) => {
    return h(
        ElRadioGroup,
        {
            modelValue:value,
            onChange: (val) => {row.sealReason = val}
        },
        [
            h(ElRadio,{label:"1"},"是"),
            h(ElRadio,{label:"0"},"否"),
        ]
    )
},