<el-table v-loading="loading" :data="list" stripe style="width: 100%">

`<el-table>` 是 Element UI 中的一个表格组件，用于展示数据列表。在HTML模板中，它有以下几个关键属性：

1. `v-loading="loading"`：当`loading`为真时，会在表格上方显示加载状态动画，表示数据正在加载中。

2. `:data="list"`：绑定当前的数据源，这里的`list`是你实际要展示的数据数组。

3. `stripe`：开启表格的分隔线样式，通常用于美观地显示表头和数据之间的间隔。

4. `style="width: 100%"`：设置表格的宽度为父元素的100%，以适应容器大小。

5. `@row-click="clickRow"`：当点击表格中的某一行时，会触发`clickRow`方法，可以在此处定义用户的点击事件处理逻辑。

6. `@selection-change="handleSelectionChange"`：当选择项发生变化时（如选中/取消选中），会调用`handleSelectionChange`方法，处理与选择相关的业务操作。

为了演示这个组件，假设你有一个名为`list`的对象数组，你可以这样设置：

<template>
  <div>
    <el-table
      v-loading="loading"
      :data="list"
      stripe
      @row-click="clickRow"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="序号" type="index" :index="indexMethod" width="80" align="center"></el-table-column>
      <!-- 添加其他列... -->
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      list: [], // 这里需要你填充具体的列表数据
      indexMethod(index) { return index + 1; }, // 定义索引列的计算方式
      // 其他方法...
    };
  },
  methods: {
    clickRow(row) {
      console.log(`点击了第${row.index}条数据`);
    },
    handleSelectionChange(selection) {
      console.log('选择改变:', selection);
    }
  }
};
</script>