iview ui table表格中嵌套input、select 2个功能_iview table input

当然，也可以复制下面的demo，自己尝试一下：

{
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, 'View')
                            ]);
                        }

由文档得知，table组件提供一个api：render函数，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。

参数解读：

h:  vue  Render函数的别名（全名 createElement）即 Render函数

params： table 该行内容的对象

props：设置创建的标签对象的属性

style：设置创建的标签对象的样式

on：为创建的标签绑定事件

所以代码中的render函数，即创建的一个div中包裹一个button按钮，同时给button设置了相关属性和绑定事件

那么如下图又该如何实现呢：

我记得我之前的文章有提到过，iview ui 表格里面嵌入 input功能；

全部代码如下：

<template>
  <div class="meeting">
    <Table border :columns="columns" :data="data" :height="tableHeight"></Table>
  </div>
</template>
<script>
export default {
  data() {
    let t = this;
    return {
      tableHeight: "550",
      columns: [
        {
          title: "序号",
          type: "index",
          width: 70,
          align: "center"
        },
        {
          title: "名称",
          key: "name",
          width: 180,
          align: "center"
        },
        {
          title: "input输入1",
          key: "attendee",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: "",
                size: "small"
              },
              on: {
                input: val => {
                  t.data[params.index].estimateTime = val;
                }
              }
            });
          }
        },
        {
          title: "input输入2",
          key: "state",
          width: 180,
          align: "center",
          render: (h, params) => {
            return h("Input", {
              props: {
                value: "",
                size: "small"
              },
              on: {
                input: val => {
                  t.data[params.index].actualTime = val;
                }
              }
            });
          }
        },
        {
          title: "select选中的值",
          key: "selectData",
          width: 260,
          align: "center",
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {},
                on: {
                  "on-change": event => {
                    this.data[params.index].volumeType = event;
                  }
                }
              },
              params.row.selectData.map(item => {
                return h("Option", {
                  props: {
                    value: item.value,
                    label: item.name
                  }
                });
              })
            );
          }
        },
        {title: '操作',key: 'actions',align: 'center',
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary', size: 'small'
                        },
                        // 每个按钮不是可以设置style， 可以根据 display:   条件？'none': 'block'
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {

                            }
                        }
                    }, '详情'),
                    h('Button', {
                        props: {
                            type: 'primary', size: 'small'
                        },
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {

                            }
                        }
                    }, '编辑'),
                    h('Button', {
                        props: {
                            type: 'primary', size: 'small'
                        },
                        style: {
                            marginRight: '8px',
                        },
                        on: {
                            click: () => {

                            }
                        }
                    }, '范围'),
                    h('Button', {
                        props: {
                            type: 'error', size: 'small'
                        },
                        style: {
                            marginRight: '8px'
                        },
                        on: {
                            click: () => {

                            }}
                    }, '删除'),
                ])
            }
        }
      ],
      data: [
        {
          name: "123",