使用iView遇到的问题

初始化数据

handlePropsData () {
    let obj = {}
    let keys = Object.keys(this.editData)
    keys.forEach((key) => {
        if (key === 'topLogo' || key === 'topPic') {
            obj[key] = []
        } else {
            obj[key] = this.editData[key]
        }
    })
    this.ruleForm = obj
},

单选框

• 当单选框要绑定 number 类型的数值时，前面要加冒号（:）

• input 框绑定时要用 v-model，别用官方的 :value.sync

• Form中的input上加入clearable会在最后面显示一个清空按钮

• 下拉框优化：

<Select v-model="params.type" clearable>
          <Option :value="type.value" v-for="type in typeList" :key="type.value">{{type.label}}</Option>
</Select>

typeList: [
	{
	  value: 1,
	  label: '新势力'
	},
	{
	  value: 0,
	  label: '影响力'
	}
],

模态框

• 如果你把属性写上之后不起作用，那就加一个:试试，一定要注意使用冒号绑定

• 在Modal上加个fullscreen可以充满全屏

<Modal title="新增"
         @on-visible-change='changeShow'
         :mask-closable='false'
         fullscreen>
</Modal>

• 隐藏模态框的底部按钮(在Modal上加)：:footer-hide="true"

• 当模态框发生改变的话(点击蒙版消失)会触发on-visible-change方法（如上述代码，会触发changeShow方法）

• 可以通过自定义页脚，去掉模态框中的确认和取消按钮：（slot="footer"）

<Modal v-model="data"
	   title="标题">
	<div slot="footer">
		<i-button @click="handleReset()">取消</i-button>
		<i-button type="primary"
				@click="handleSubmit('formData')">提交</i-button>
	</div>
</Modal>

Table表格

• 使用表格时，注意render的使用方式，一般不按照官方标准，有可能会出现错误，所以要使用render(h,params)这样的方式

• 可以在iview中的table上绑定一个loading，然后在data中设置为true，可以加一个加载动画（:loading="loading" loading:true）

• table框中数据过长，鼠标移入显示所有数据详情

{
  title: '描述',
  align: 'center',
  ellipsis: true,
  render: (h, params) => { // 鼠标移入显示详情
	return h('div', [
	  h('span', {
		style: {
		  display: 'inline-block',
		  width: '100%',
		  overflow: 'hidden',
		  textOverflow: 'ellipsis',
		  whiteSpace: 'nowrap'
		},
		domProps: {
		  title: params.row.description
		}
	  }, params.row.description)
	]);
  }
},

• table渲染不同内容

{
  title: "处理状态",
  key: "status",
  render: (h, params) => {
    let text = "";
    // console.log(params.row.status);
    if (params.row.status === "untreated") {
      text = "未处理";
    } else if (params.row.status === "right") {
      text = "无需修改";
    } else if (params.row.status === "modified") {
      text = "已修改";
    } else {
      text = "待定";
    }
    return h("div", [
      h(
        "div",
        {
          props: {}
        },
        text
      )
    ]);
  },
},

• table点击表格内的链接跳转

{
  title: "查询词",
  key: "query",
  render: (h, params) => {
    let url =
      "http://www.sogoucn.com/wap.html?iploc=110000&dbg=off&vdbg=off&query=" +
      params.row.query;
    return h(
      "a",
      {
        attrs: {
          href: url,
          target: "_black"
        }
      },
      params.row.query
    );
  },
},

• table使用slot的渲染方式

// Table
<Table :loading="loading"
       :columns="columns"
       @on-sort-change='changeSort'
       :data="tableData">
  <template slot-scope="{ row }"
            slot="option">
    <Button size="small"
            type="primary"
            @click="editWeek(row)">编辑</Button>
    <Button size="small"
            type="error"
            @click="deleteWeek(row)">删除</Button>
  </template>
</Table>

// 数据
columns: [
    {
      title: '人物ID',
      key: 'personID',
      sortable: true,
      sortMethod: (a, b, type) => { }
    },
    {
      title: '姓名',
      key: 'personName'
    },
    {
      title: '操作',
      key: 'option',
      slot: 'option',
      width: 180
    }
],

• table点击放大图片

{
	title: '附件',
	key: "image",
	render: (h, params) => {
		let _img = params.row.image?config.default.baseUrl.dev+'/'+params.row.image:''; //因为现在后台返回来的只有一张图片，String类型。
		let imgs = [_img];//组装成 数组
		if(_img){
			return h('viewer', {
				props:{
					images:imgs //数组
				}
			}, imgs.map(img=>{ //循环显示
				return h('img',  {
						attrs: {
							src: img, 
							style: 'width: 40px;height: 40px;'
						},
					},);
			})
			)
		}else{
			return h("span", '');
		}

	}
},

• 设置table的表头

{
  key: 'id',
  align: 'center',
  renderHeader: (h, params) => {
    return h("div", [
      h(
        "div",
        {
          props: {}
        },
        'ID'
      )
    ]);
  }
},

• table自定义排序

<Table :loading="loading"
       :columns="columns"
       @on-sort-change='changeSort'
       :data="tableData">
</Table>

// 数据
sort: '',   // 要排序的字段
sortBy: ''  // 排序方式 asc desc
      
columns: [
    {
      title: '人物ID',
      key: 'personID',
      sortable: true,
      sortMethod: (a, b, type) => { }  // 重置排序方法
    },
    {
      title: '年',
      key: 'year',
      sortable: true,
      sortMethod: (a, b, type) => { }
    },
],

// 方法
changeSort (para) {
  console.log(para) // 这里面的值和columns里面设置的有关，比如key
  para.order === 'normal' ? this.sortBy = '' : this.sortBy = para.order
  this.sort = para.key
  // 调接口更新数据
  this.getList()
},

• table表格按钮操作

{
	title: '操作',
	key: 'action',
	align: 'center',
	render: function (h, params) {
	  return h('div', [
		h('Button', { //渲染按钮
		  props: {
			type: 'primary',
			size: 'small'
		  },
		  style: {
			marginRight: '8px'
		  },
		  on: {
			click: function () {
			  mCheck.singleShow(params.row);
			}
		  }
		}, '查看'),
		h('icon', { //渲染图标
		  props: {
			type: 'md-arrow-dropup',
			size: 'small'
		  },
		  style: {
			marginRight: '5px'
		  },
		  on: {
			click: () => {
			  this.Edit(params.row)
			}
		  }
		}),
		h('i-switch', { //渲染switch
		  props: {
			type: 'primary',
			value: 'params.row.else',
			// disabled:
			// size: '20'
		  },
		  style: {
			marginRight: '5px',
		  },
		  on: { //操作事件
			'on-change': (value) => { //值发生了改变调用方法  触发事件是on-change,用双引号括起来，
			  console.log(value) //true false
			}
		  }
		}),
		h('img', { //渲染图片
		  attrs: {
			src: params.row.avatarUrl,
			style: 'width: 100px;border-radius: 2px;margin-top:4px;' //图片在表格中的样式
		  },
		}),
		h('span', {//自定义渲染 这里拿渲染温度来举例子的
		  style: {
			color: '#31708f'
		  }
		}, params.row.orange + ' ℃ '),
	  ]);
	}
  }

Form验证

<template>
  <i-form ref="formValidate"
          :model="formValidate"
          :rules="ruleValidate"
          :label-width="80">
    <Form-item label="ID"
               prop="id">
      <i-input v-model="formValidate.id"
               number
               placeholder="请输入ID"
               :maxlength="5"
               clearable></i-input>
    </Form-item>
    <Form-item label="MID"
               prop="mid">
      <i-input v-model="formValidate.mid"
               placeholder="请输入MID"
               number
               clearable></i-input>
    </Form-item>
    <Form-item label="姓名"
               prop="name">
      <i-input v-model="formValidate.name"
               placeholder="请输入姓名"
               clearable></i-input>
    </Form-item>
    <Form-item label="邮箱"
               prop="mail">
      <i-input v-model="formValidate.mail"
               placeholder="请输入邮箱"></i-input>
    </Form-item>
    <Form-item label="城市"
               prop="city">
      <i-select v-model="formValidate.city"
                placeholder="请选择所在地">
        <i-option value="beijing">北京市</i-option>
        <i-option value="shanghai">上海市</i-option>
        <i-option value="shenzhen">深圳市</i-option>
      </i-select>
    </Form-item>
    <Form-item label="性别"
               prop="gender">
      <Radio-group v-model="formValidate.gender">
        <Radio label="male">男</Radio>
        <Radio label="female">女</Radio>
      </Radio-group>
    </Form-item>
    <Form-item label="性别数字类型"
               prop="gender">
      <Radio-group v-model="formValidate.sex">
        <!-- 如果是数字类型，必须加：冒号 -->
        <Radio :label=1>男</Radio>
        <Radio :label=0>女</Radio>
      </Radio-group>
    </Form-item>
    <Form-item label="爱好"
               prop="interest">
      <Checkbox-group v-model="formValidate.interest">
        <Checkbox label="吃饭"></Checkbox>
        <Checkbox label="睡觉"></Checkbox>
        <Checkbox label="跑步"></Checkbox>
        <Checkbox label="看电影"></Checkbox>
      </Checkbox-group>
    </Form-item>
    <Form-item label="介绍"
               prop="desc">
      <i-input v-model="formValidate.desc"
               type="textarea"
               :autosize="{minRows: 2,maxRows: 5}"
               placeholder="请输入..."></i-input>
    </Form-item>
    <Form-item>
      <i-button type="primary"
                @click="handleSubmit('formValidate')">提交</i-button>
      <i-button @click="handleReset('formValidate')"
                style="margin-left: 8px">重置</i-button>
    </Form-item>
  </i-form>
</template>
<script>
export default {
  data () {
    const validateMID = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('内容不能为空'));
      } else if (!Number.isInteger(+value)) {
        callback(new Error('请输入数字'));
      } else if (String(value).length >= 8) {
        callback(new Error('长度过长'));
      } else if (String(value).length <= 1) {
        callback(new Error('长度过短'))
      } else {
        callback();
      }
    };
    return {
      formValidate: {
        id: '',
        mid: '',
        name: '',
        mail: '',
        city: '',
        sex: '',
        gender: '',
        interest: [],
        desc: ''
      },
      ruleValidate: {
        id: [
          { required: true, type: 'number', message: 'ID不能为空且必须是数字类型', trigger: 'blur' },
        ],
        mid: [
          { required: true, validator: validateMID, trigger: 'change' }
        ],
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        //  注意value的类型，必须要是String类型的,如果是number类型，需在下面加入 type:'number'
        city: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        sex: [
          { required: true, message: '请选择数字性别', trigger: 'change' }
        ],
        interest: [
          { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
          { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请输入个人介绍', trigger: 'blur' },
          { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          console.log(this.formValidate);
          this.$Message.success('提交成功!');
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    }
  }
}
</script>

• table表格中内容点击跳转

render: (h, params) => {
	let url = "xxxxxxxxxx" + params.row.fixID;
	return h(
	  "a",
	  {
		attrs: {
		  href: url,
		  target: "_black"
		}
	  },
	  params.row.fixID
	);
}

• table表格内容渲染图片

{
  title: '图片',
  align: 'center',
  width: 90,
  render: (h, params) => {
	return h("img", {
	  attrs: {
		src: params.row.picurl
	  },
	  style: {
		width: '60px',
		height: '80px'
		// display: 'block'
	  }
	});
  }
}

• 一个table表格内渲染多条内容

{
  title: "原图",
  align: "center",
  width: 160,
  render: (h, params) => {
	return h("div", [
	  h("img", {
		attrs: {
		  src: params.row.imgRawUrl
		},
		style: {
		  width: "160px",
		  // height: "160px",
		  padding: "5px 5px 0px 5px"
		}
	  }),
	  h(
		"div",
		{
		  style: {}
		},
		"图片类型：" + params.row.imgRawType
	  ),
	  h(
		"div",
		{
		  style: {}
		},
		"图片大小：" +
		params.row.imgRawWidth +
		" * " +
		params.row.imgRawHeight
	  )
	]);
  }
},