element ＜el-table＞局部（操作）加loading

最新推荐文章于 2024-09-19 14:54:46 发布

原创最新推荐文章于 2024-09-19 14:54:46 发布 · 2.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #elementui

vue 专栏收录该内容

6 篇文章

订阅专栏

这篇博客展示了如何在Vue.js应用中利用Element UI库创建一个带有提交操作功能的数据表格。通过`<el-table>`和`<el-table-column>`组件，实现了数据展示，并在操作列中添加了提交按钮。`submitFn`方法处理提交逻辑，同时使用`this.$set()`确保数据变化能被监听。在提交时，按钮会显示加载状态，提交成功或失败后恢复原状。

<el-table :data="tableData">
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button :loading="scope.row.submitloading" @click="submitFn(scope.row)">提交        
          </el-button>
        </template>
      </el-table-column>
</el-table>


<script>
    export default {
        data(){
           return {
             tableData:[]
}
         },
        methods:{
               getList () {
                     queryList().then(res => {
                        this.tableData = res.data
                        this.table.map(item => {
                        this.$set(item, 'submitloading', false)
                        return item
                      })
              })
    },
              submitFn (row) {
                  row.submitloading = true
                  submitList().then(res => {
                  row.submitloading = false
              }).catch(() => {
                    row.submitloading = false
              })
            }
         }

}
</script>

注：一定要用this.$set()，其他方式监听不到，增加不了字段