vue2 element ui

<template>
  <div id="app">
    <!-- Element UI 的表格组件示例 -->
    <el-table :data="tableData" style="width: 100%">
      <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>

    <!-- Element UI 的按钮组件示例 -->
    <el-button type="primary" @click="handleClick">点击我</el-button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // 表格数据
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }
      ]
    };
  },
  methods: {
    // 按钮点击事件处理函数
    handleClick() {
      this.$message('你点击了按钮');
    }
  }
};
</script>

<style>
/* 可以在这里添加一些自定义样式 */
</style>

解释说明：

1. 模板部分 (<template>)：

   • 使用了 el-table 和 el-table-column 组件来创建一个表格，表格的数据通过 :data 绑定到 tableData。
   • 使用了 el-button 组件来创建一个按钮，并绑定了一个点击事件 @click="handleClick"。

2. 脚本部分 (<script>)：

   • 定义了一个 Vue 组件，其中包含 data 和 methods。
   • data 中定义了表格的数据 tableData，这是一个数组，每个对象代表一行表格数据。
   • methods 中定义了一个方法 handleClick，当按钮被点击时会触发这个方法，并弹出一个消息提示框。

3. 样式部分 (<style>)：

   • 这里可以添加一些自定义的样式，但在这个例子中没有具体的样式定义。

这个示例展示了如何在 Vue 2 中使用 Element UI 的基础组件（如表格和按钮），并进行了简单的交互处理。