WIFIPR 跑WiFi字典 中文汉化版

### 实现 `el-table` 组件中的 Loading 效果 在 Element UI 的 `el-table` 组件中，可以通过设置 `loading` 属性来显示加载状态。当此属性被设为 `true` 时，表格会展示一个默认的加载动画，直到数据准备就绪并更新完毕[^1]。 为了控制何时开启或关闭这个加载指示器，通常会在发起请求获取远程数据之前将该属性置为 `true`；而在接收到响应完成渲染新数据之后再将其重置回 `false`。下面是一个简单的例子展示了这一过程： ```vue <template> <div id="app"> <!-- 使用 v-loading 指令绑定 loading 状态 --> <el-table :data="tableData" style="width: 100%" v-loading="isLoading"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> <button @click="fetchData">刷新</button> </div> </template> <script> export default { data() { return { isLoading: false, tableData: [] }; }, methods: { fetchData() { this.isLoading = true; setTimeout(() => { // 模拟异步操作 this.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' } ]; this.isLoading = false; // 数据加载完成后停止加载提示 }, 2000); } }, mounted(){ this.fetchData(); } }; </script> ``` 通过上述代码可以观察到，在点击按钮触发 `fetchData()` 方法时开启了加载效果，并且在模拟的数据返回后又及时关闭了它。这样就可以给用户提供更好的交互体验，告知他们当前正处于等待服务器响应的过程中[^1]。