iview-admin 之操作按钮，弹出提交表单

参考
https://blog.csdn.net/u011611479/article/details/111412697 操作列
https://blog.csdn.net/Dong8508/article/details/81875620 弹出表单

弹出表单

<template>			
	<Button type="primary" @click="modal = true">设置汇率</Button>
	<Modal
		v-model="modal"
		title="设置汇率"
		:loading="loading"
		@on-ok="ok"
		@on-cancel="cancel">
		<Form ref="setGold" :model="setForm" :rules="rules">
			<FormItem prop="rate">
				<Row>
					<Col span="6">
						<div style="margin-top:2px">请输入设置的汇率:</div>
					</Col>
					<Col span="8">
						<Input v-model="setForm.rate" placeholder="请输入设置的汇率"></Input>
					</Col>									 
				</Row>
			</formItem>	
		</Form>		
	</Modal>
</template>

<script>
export default{
	data(){
	return {
		modal: false,
		loading:true,
		setForm:{rate:''},
		rules: {
			rate: [
				{ required: true, message: '汇率不能为空', trigger: 'blur' },
			    { type: 'string',pattern:/^[0-9]*$/, message:'汇率格式不正确', trigger:'blur'},
			],     
		}
	}
	},
	mounted(){
	 
	},
	methods:{
		async ok() {
			this.$refs.setGold.validate( async(valid) => {
				if (valid) {
					let  res =await this.$ajax.post('/xx/xx',{});
					if(res.cd == 0){
						//doSomething..
					}else{
						this.$Message.info(res.msg);
					}
				}else{
		            //对话框校验失败，取消loading状态    
					this.loading=false;
					setTimeout(() => {
					  this.$nextTick(() => {
		                    this.loading = true;
		              });
					}, 100);
				}
			})   
		},
		cancel () {
		    //取消后，重置表单
			this.$refs['setGold'].resetFields();
		}
	 
	},
	 
}
</script>

操作列 （编辑删除按钮，图片，开关按钮）

columns: [
    { 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: '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)
                }
              }
            },
            '删除'
          )
        ])
      }
    }