当单选框要绑定 number 类型的数值时，前面要加冒号（:）
input 框绑定时要用 v-model，别用官方的 :value.sync
Form中的input上加入clearable会在最后面显示一个清空按钮
下拉框优化：
{{type.label}}typeList: [
{
value: 1,
label: ‘新势力’
},
{
value: 0,
label: ‘影响力’
}
],
复制代码模态框
如果你把属性写上之后不起作用，那就加一个:试试，一定要注意使用冒号绑定
在Modal上加个fullscreen可以充满全屏
<Modal title=“新增”
@on-visible-change=‘changeShow’
:mask-closable=‘false’
fullscreen>
复制代码
隐藏模态框的底部按钮(在Modal上加)：:footer-hide=“true”
当模态框发生改变的话(点击蒙版消失)会触发on-visible-change方法（如上述代码，会触发changeShow方法）
可以通过自定义页脚，去掉模态框中的确认和取消按钮：（slot=“footer”）
<i-button @click=“handleReset()”>取消
<i-button type=“primary”
@click=“handleSubmit(‘formData’)”>提交
复制代码Table表格
使用表格时，注意render的使用方式，一般不按照官方标准，有可能会出现错误，所以要使用render(h,params)这样的方式
可以在iview中的table上绑定一个loading，然后在data中设置为true，可以加一个加载动画（:loading=“loading” loading:true）
table框中数据过长，鼠标移入显示所有数据详情
https://www.jianshu.com/p/3e0bed48866d
https://www.jianshu.com/p/e8eb05ecfd91
https://www.jianshu.com/p/db575bdc4742
https://www.jianshu.com/p/41ef2f434e0c
https://www.jianshu.com/p/16643541383c
{
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: “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表格按钮操作
{
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 + ’ ℃ '),
]);
}
}
复制代码表格验证
北京市
上海市
深圳市
男
女
男
女
<i-button type=“primary”
@click=“handleSubmit(‘formValidate’)”>提交
<i-button @click=“handleReset(‘formValidate’)”
style=“margin-left: 8px”>重置
复制代码
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
)
]);
}
},
