实现vue的条件渲染

news2024/9/30 17:30:41

在这里插入图片描述

我的需求是根据设备不同的状态渲染不同的标签。设备状态用device_State表示。
在线上面是一个vue的标签，我有一个数据state ，如何让这个标签根据数据的取值，修改内容，如state=1时，标签修改为离线
要根据数据的取值动态修改Vue组件的内容，可以使用条件渲染和绑定属性的方式来实现。具体来说，可以使用Vue的计算属性来根据state的取值返回不同的标签内容和属性，然后在模板中使用这个计算属性来动态渲染标签。

1.单一标签的实现方式

<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>

在上面的示例中，定义了一个计算属性 tagType，根据 state 的值返回不同的标签类型。同时，也定义了另一个计算属性 tagContent，根据 state 的值返回不同的标签内容。

在模板中，使用了动态绑定属性 :type 和动态渲染内容 {{ tagContent }}，这样当 state 的值发生变化时，组件的内容就会自动更新为相应的标签类型和内容。

这种只有一条数据的时候是比较方便的，但如果是在表格中，那么就需要获得行数据。

2.在表格中的实现方式

代码如下

<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>

在上面的示例中，使用了slot插槽来动态渲染表格中的标签。在el-table-column组件中，使用了一个具名插槽slot-scope，通过row参数获取到当前行的数据，然后根据状态值动态渲染标签内容。在模板中，使用了动态绑定属性:type和动态渲染内容{{ tagContent(row.state) }}，这样就可以在表格中动态渲染标签内容了。
需要注意的是，在表格中使用slot插槽时，需要通过slot-scope来获取到当前行的数据。
除了这种方式外，还可以使用自定义组件来实现。

3.使用组件的方式实现

当组件需要在v-for指令中进行渲染时，可以将计算属性移动到组件的props中，然后通过父组件传递状态值进入子组件。

<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>

在上面的示例中，我们将计算属性移动到了组件的props中，并通过父组件将状态值传递给子组件。在模板中，我们通过动态绑定属性:type和动态渲染内容{{ tagContent }}来渲染标签，并在v-for指令中循环渲染子组件，传递不同的状态值进入子组件。

以下是一个在v-for指令中使用组件的示例：

<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>