web-test/src/layout/enterprise/parts/room.vue

<template>
  <div id="room">
    <el-col :span="24" class="leftTop"> <span>|</span> <span>消息管理</span> </el-col>
    <el-table :data="list" border stripe :show-header="false" @row-click="toChat">
      <el-table-column prop="buyer_name" align="center"></el-table-column>
      <el-table-column align="center">
        <template v-slot="{ row }">
          <template v-if="row.needRead == 0">
            暂无未读消息
          </template>
          <template v-if="row.needRead > 0">
            <span style="color:red">您有{{ row.needRead }}条未读消息 </span>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'room',
  props: {
    list: { type: Array, default: () => [] },
  },
  components: {},
  data: () => {
    return {};
  },
  created() {},
  methods: {
    toChat(row) {
      this.$emit('toChat', row);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-table {
  width: 95%;
  margin: 20px;
}
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
</style>