Dot 点 ​

<template>
  <el-space :size="30">
    <el-dot> primary </el-dot>
    <el-dot type="success"> success </el-dot>
    <el-dot type="info"> info </el-dot>
    <el-dot type="warning"> warning </el-dot>
    <el-dot type="danger"> danger </el-dot>
  </el-space>
</template>

<template>
  <el-space :size="30">
    <el-dot color="#626aef"> color1 </el-dot>
    <el-dot color="#808000"> color2 </el-dot>
    <el-dot color="#800080"> color3 </el-dot>
  </el-space>
</template>

<template>
  <el-space :size="30">
    <el-dot size="small"> small </el-dot>
    <el-dot size="default"> default </el-dot>
    <el-dot size="large"> large </el-dot>
    <el-dot size="10"> 10px </el-dot>
    <el-dot size="12px"> 12px </el-dot>
  </el-space>
</template>

<template>
  <el-space :size="30">
    <el-dot>
      <el-text type="primary">primary</el-text>
    </el-dot>
    <el-dot type="success">
      <el-text type="success">success</el-text>
    </el-dot>
    <el-dot type="info">
      <el-text type="info">info</el-text>
    </el-dot>
    <el-dot type="warning">
      <el-text type="warning">warning</el-text>
    </el-dot>
    <el-dot type="danger">
      <el-text type="danger">danger</el-text>
    </el-dot>
  </el-space>
</template>

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180">
      <template #default="scope">
        <el-dot type="primary">
          <el-text>{{ scope.row.date }}</el-text>
        </el-dot>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="Name" width="180">
      <template #default="scope">
        <el-dot type="success">
          <el-text>{{ scope.row.name }}</el-text>
        </el-dot>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="Address">
      <template #default="scope">
        <el-dot type="danger">
          <el-text>{{ scope.row.address }}</el-text>
        </el-dot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>