iview admin table 列渲染自定义view 和 swich ，button，input 等操作

由于审美能力随着时间的推移，最近做一个项目选择了iview admin 作为后端ui，table 开发是必不可少的一个环节，下面就把我使用的做个笔记

1、table 效果上图

注意点：列渲染图片，swich 开关，按钮 等

具体实现方法

在列上使用 render 函数对自定义的内容进行设置，这部分内容iview 官网table板块文档有介绍

重要的事情说叁遍，多看文档，多看文，多看...

2、上代码

columns: [
        // 表头
        { type: 'selection', width: 60, align: 'center' },
        { title: '商品', key: 'name', minWidth: 120 },
        { title: '缩略图',
          key: 'thumb',
          minWidth: 60,
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: params.row.thumb
                },
                style: {
                  width: '50px',
                  height: '50px'
                }
              }, 'div')
            ])
          } },
        { title: '分类', key: 'category_name', minWidth: 120 },
        { title: '单价', key: 'price', minWidth: 120 },
        { title: '销量', key: 'label', minWidth: 120 },
        { title: '上架',
          key: 'id',
          minWidth: 80,
          render: (h, params) => {
            return h('div', [
              h('i-switch', {
                props: {
                  size: 'large',
                  type: 'primary',
                  value: true // 控制开关的打开或关闭状态，官网文档属性是value
                },
                scopedSlots: {
                  open: () => h('span', '上架'),
                  close: () => h('span', '下架')
                },
                on: {
                  'on-change': (value) => { // 触发事件是on-change,用双引号括起来，
                    this.switch(params.index) // params.index是拿到table的行序列，可以取到对应的表格值
                  }
                }
              }, '上架')
            ])
          } },
        { title: '创建时间', key: 'created_time', minWidth: 120, sortable: true, sortType: 'desc' },
        { title: '操作',
          key: 'action',
          align: 'center',
          width: 200,
          fixed: 'right',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                    icon: 'ios-create-outline'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'md-trash'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }

输入框的代码

{
          title: "中奖率%",
          key: "tagName",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("Input", {
                props: {
                  value: params.row.tagName,
                  placeholder: "请输入中奖率"
                },
                on: {
                  input: event => {
                    this.relateData[params.index].tagName = event;
                    this.getRowData1(params);
                  },
                  "on-search": e => {
                    this.currentPage=1
                    this.getRowData(params);
                  }
                }
              })
            ]);
          }
        },