vue el-table border

### 如何在 Vue 的 Element UI `el-table` 组件中添加表格边框样式

为了给 `el-table` 添加边框，在定义该组件时可以使用 `border` 属性并将其设为 true。这会使得整个表格及其单元格都有明显的边界线。

<template>
  <div id="app">
    <!-- 使用 border 属性来启用表格外边框和列之间的分隔 -->
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' }
      ]
    };
  }
};
</script>

上述代码展示了如何通过简单的配置让 `el-table` 显示带有边框的效果[^1]。