I want to change different colors according to different states, what to do, using the iview framework.
every time I use these frameworks, I will be made difficult by some minor problems in table
I want to change different colors according to different states, what to do, using the iview framework.
every time I use these frameworks, I will be made difficult by some minor problems in table
now OK. My way of writing is
{
title: '',
key: 'state',
render:(h,params)=>{
let tmpStr = "";
if(params.row.state==0){
tmpStr="";
}else if(params.row.state==1){
tmpStr="";
}else{
tmpStr="";
}
return h('span',{
style:{
color: (params.row.state==0)?"-sharped3f14":(params.row.state==1?"-sharp19be6b":"-sharp2d8cf0")
}
},tmpStr)
}
} column accepts a render prop
https://iview.github.io/compo.
render (row, column, index) {
return
`<i-button type="primary" size="small" @click="show(${index})"></i-button> <i-button type="error" size="small" @click="remove(${index})"></i-button>`;
} Chestnut on iview official website. Render the style you want in the render function, but you can declare a method in data to return the corresponding color according to the value of row.xx you passed. You can use style or class binding
to show you the code I use element, which is more or less the same
<template slot-scope="scope">
<el-tag
:type="stateTagType(scope.row.state)"
size="mini">{{scope.row.state}}</el-tag>
</template>template is equivalent to the render function.
stateTagType(type) {
if(type == "") {
return "warning"
}else if(type == "") {
return "danger"
}else if(type == "") {
return "success"
}
}methods in methods
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'success',
size: 'large'
},
style: {
marginRight: '10px'
},
on: {
click: () => {
}
}
}, ''),
h('Button', {
props: {
type: 'warning',
size: 'large'
},
style: {
marginRight: '10px'
},
on: {
click: () => {
}
}
}, ''),
h('Button', {
props: {
type: 'error',
size: 'large'
},
style: {
marginRight: '10px'
},
on: {
click: () => {
}
}
}, ''),
]);
}Previous: Management of whether ui components are visible in mobx?
Next: React-native build cannot start the problem on its own after success
iview, is used in the UI library of the project. Everything is fine before npm run build, but after packaging, there will be problems such as calling this.$Message error, Modal,Slider,Checkbox and other tools can not be displayed. What is the reason? t...
4023 Program Logic: when you click on a line, assign the corresponding number of lines [index] to the [edittingCellId] variable, and then match the corresponding number of lines in a more corresponding state. ...