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

本文主要是介绍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=1this.getRowData(params);}}})]);}},