<template>
  <div class="publicContainer">
    <el-table v-loading="tableLoading" :data="tableData" max-height="350">
      <el-table-column label="序号" type="index" width="55" />
      <el-table-column label="消息" prop="xiaoxi" />

      <el-table-column label="操作" width="100" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button v-if="scope.row.zt == 1" type="primary">已读</el-button>
          <el-button v-if="scope.row.zt == 2" type="warning" @click="handleUpdate">未读</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
const tableLoading = ref(false);
const { proxy } = getCurrentInstance();
const tableData = ref([
  {
    xiaoxi: '11',
    zt: '1',
  },
  {
    xiaoxi: '22',
    zt: '2',
  },
]);
function handleUpdate() {
  proxy.$modal.msgSuccess('消息已读成功！');
}
</script>