iview table自定义columns组件实践（input、select、button等）

iview table单元格插入组件

如下图所示：可以在table单元格中自定义各种组件

主要是通过自定义columns

<Table  
	border
	:columns="columns"
    :data="data" >
</Table>

1、span文案

columns: [
  {
    title: 'span',
    key: 'span',
    render: (h, params) => {
      return h("span", 'span应用');
    }
  }
]

2、div代码块

columns: [
  {
    title: 'div',
    key: 'div',
    render: (h, params) => {
      return h("div", 'div应用'); //文案内容可以加\n换行
    }
  }
]

3、icon 图标

columns: [
  {
    title: 'icon',
    key: 'icon',
    render: (h, params) => {
      return h("Icon", {
        props: {
          type: "ios-checkmark"
        }
      }, '')
    }
  }
]

4、Tag 标签

 columns: [
  {
    title: 'Tag',
    key: 'Tag',
    render: (h, params) => {
      return h("Tag", {
        props: {
          color: "success"
        }
      }, '联调中')
    }
  }
]

5、switch 开关

 columns: [
  {
    title: 'switch',
    key: 'status',
    render: (h, params) => {
      return h('i-switch', {
        props: {
          value: params.row.status ? true : false, // 根据状态判断是开还是关
          size: 'large',
          // 'before-change': this.change
        },
        on: {
          'on-change': (e) => {
            this.change(e) // switch的改变事件
          }
        }
      },
      // 开/关的文案
      [ 
        h('span', { slot: 'open' }, 'ON'),  
        h('span', { slot: 'close' }, 'OFF'),
      ]
     )
    }
// 哭死， iview （before-change：阻止切换） 无法获取当前列表项数据，当前render写法mousedown.native又不生效，果断更换element的el-switch
	return h('el-switch', {
      props: {
        value: params.row.status ? true : false
      },
      on: {
        change: (e) => {
          this.change(e, params.row)
        }
      }
    })
  }
]

6、Button 按钮

columns: [
 {
    title: 'Button',
    key: 'Button',
    render: (h, params) => {
      return h('Button', {
        props: { // 属性
          type: 'primary',
          size: 'small'
        },
        style: { //样式
          marginRight: '5px'
        },
        on: { // 事件
          click: () => {
            this.show(params.row)
          }
        }
      }, '详情')
    }
  }
]

7、Tooltip 文字提示

columns: [
  {
    title: 'Tooltip',
    key: "Tooltip",
    width: 200,
    align: "center",
    render: (h, params) => {
      const text = "超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏;超出5行隐藏"
      return h("div", [
        h(
          "Tooltip",
          {
            props: {
              theme: "light",
              maxWidth: 500,
              placement: "left-start",
            },
          },
          [
            h(
              "div", // 表格中的文案
              {
                style: {  // 超出5行隐藏并生成省略号
                  display: "-webkit-box",
                  "-webkit-box-orient": "vertical",
                  "-webkit-line-clamp": 5,
                  overflow: "hidden",
                  width: "100%",
                },
              },
              text
            ),
            h(
              "span", // 弹窗展示的文案
              {
                slot: "content",
              },
              text
            ),
          ]
        ),
      ]);
    },
  },
]

8、Input 输入框

columns: [
  {
    title: 'Input',
    key: 'Input',
    render: (h, params) => {
      return h('div', [
        h('Input', {
          props: { // 指定输入框target.value
            value: params.row.name,
            placeholder: '请输入'
          },
          on: {
            input: (e) => { // 动态设置data中的值
              this.$set(this.data[params.index], 'name', e);
            }
          }
        })
      ])
    }
  },
]

9、select 下拉框

columns: [
  {
    title: 'Select',
    key: 'Select',
    render: (h, params) => {
      return h('div', [
        h('Select', {
            props:{ //属性
                value: '',
                placeholder: '渠道',
                transfer: true
            },
            on: {  // 改变事件
                'on-change':(value) => {
                    this.data[params.index].channel= value;
                }
            },
        },  // 下拉项数据赋值
        this.channelList.map((obj)=>{
            return h('Option', {
                props: {value: '渠道名称'}
            });
        })
        )
      ])
    }
  }
]

以上就是各组件在table中的应用！！！