My requirement is to render different labels based on different states of the device. The device status is represented by device_State.
Above the line is a vue label. I have a data state. How can I modify the content of this label according to the value of the data? For example, when state=1, the label is changed to offline and the content of the Vue
component must be dynamically modified according to the value of the data. This can be achieved using conditional rendering and binding properties. Specifically, you can use Vue's computed properties to return different label contents and attributes based on the state value, and then use this computed property in the template to dynamically render the label.
1. How to implement a single label
<template>
<el-tag :type="tagType">{
{
tagContent }}</el-tag>
</template>
<script>
export default {
data() {
return {
state: 1 // 初始值为 1
};
},
computed: {
tagType() {
// 根据 state 的值返回不同的 type 属性
return this.state === 1 ? 'success' : 'danger';
},
tagContent() {
// 根据 state 的值返回不同的标签内容
return this.state === 1 ? '在线' : '离线';
}
}
};
</script>
In the above example, a computed property tagType is defined to return different tag types based on the value of state. At the same time, another calculated attribute tagContent is also defined, which returns different tag contents based on the value of state.
In the template, dynamically bound attributes: type and dynamically rendered content { { tagContent }} are used, so that when the value of state changes, the content of the component will be automatically updated to the corresponding tag type and content.
This is more convenient when there is only one piece of data, but if it is in a table, then you need to obtain row data.
2. How to implement it in the table
code show as below
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="state" label="状态">
<template slot-scope="{ row }">
<el-tag :type="tagType(row.state)">{
{
tagContent(row.state) }}</el-tag>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '项目1', state: 1 },
{
name: '项目2', state: 0 },
{
name: '项目3', state: 1 }
]
};
},
methods: {
tagType(state) {
return state === 1 ? 'success' : 'danger';
},
tagContent(state) {
return state === 1 ? '在线' : '离线';
}
}
};
</script>
In the above example, slots are used to dynamically render labels in the table. In the el-table-column component, a named slot slot-scope is used to obtain the data of the current row through the row parameter, and then dynamically render the label content based on the status value. In the template, dynamic binding attributes: type and dynamically rendered content { { tagContent(row.state) }} are used
, so that tag content can be dynamically rendered in the table.
It should be noted that when using slot slots in tables, you need to obtain the data of the current row through slot-scope.
In addition to this method, it can also be implemented using custom components.
3. Implement using components
When a component needs to be rendered in a v-for directive, you can move the calculated properties into the component's props, and then pass the state value into the child component through the parent component.
<template>
<div>
<el-tag :type="tagType">{
{
tagContent }}</el-tag>
</div>
</template>
<script>
export default {
props: {
state: {
type: Number,
required: true
}
},
computed: {
tagType() {
return this.state === 1 ? 'success' : 'danger';
},
tagContent() {
return this.state === 1 ? '在线' : '离线';
}
}
};
</script>
In the above example, we moved the computed property into the component's props and passed the state value to the child component through the parent component. In the template, we render tags by dynamically binding attributes: type and dynamically rendering content { { tagContent }}, and loop rendering sub-components in the v-for directive, passing different state values into the sub-components.
Here is an example of using components within the v-for directive:
<template>
<div>
<div v-for="item in items" :key="item.id">
<my-tag :state="item.state"></my-tag>
</div>
</div>
</template>
<script>
import MyTag from './MyTag.vue';
export default {
components: {
MyTag
},
data() {
return {
items: [
{
id: 1, state: 1 },
{
id: 2, state: 0 },
{
id: 3, state: 1 }
]
};
}
};
</script>
In the above example, we loop through the v-for directive in the parent component to render the sub-component my-tag, and pass different state values into the sub-component through the :state attribute. Subcomponents dynamically render label content based on state values.