vue+element的table组件学习模板

最新推荐文章于 2024-08-09 07:47:02 发布

kaelyn_X

最新推荐文章于 2024-08-09 07:47:02 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue element table

本文链接：https://blog.csdn.net/kaelyn_X/article/details/79144811

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
              <el-table v-loading="tableLoading" border :data="tableData" style="width: 60%" fit>
                <el-table-column
                  type="index"
                  :index="indexMethod">
                </el-table-column>
                <el-table-column label="日期" header-align="center" align="center">
                  <template slot-scope="scope">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="姓名" header-align="center" align="center">
                  <template slot-scope="scope">
                      <span v-if="!scope.row.isEdit">{{ scope.row.name }}</span>
                      <el-input v-else v-model="scope.row.newName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="address" label="地址" width="220">
                  </el-table-column>
                <el-table-column label="操作"header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="!scope.row.isEdit"
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <div v-else>
                        <el-button type="text" size="small" @click="save(scope.row)">
                          保存
                        </el-button>
                        <el-button type="text" size="small" @click="cancel(scope.row)">
                          取消
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#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 弄'
                      }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                      }],
                    tableLoading: false
                }
            },
            created:function(){
                //一开始模拟获取数据，使v-loading=true,获取数据之后再把v-loading复制为false
               setTimeout(() => {
                 this.tableLoading = false;
               }, 2000);
            },
            methods: {
               indexMethod(index) {
                   return index * 2;
               },
               handleEdit(index, row) {

                // row.isEdit = true;  // 不能这样写

                this.$set(row, "isEdit", true);     // 设置对象的属性。
                if(!row.newName){
                  //第一次赋值
                  this.$set(row, "newName", row.name);
                }else{
                  this.$set(row, "newName", row.newName);
                }
                console.log(index, row);
              },
              save(row){
                row.name = row.newName;
                row.isEdit = false;
              },
              cancel(row){
                row.isEdit = false;
              }
            }
        })
    </script>
</html>

在线演示

在渲染表格之前，需要先获取数据再填充到表格里面，这时候可以先对<el-table>标签设置属性v-loading='true'，这样表格就会有一个加载的动态动画，直到获取到想要的数据之后便可以通过v-loading='false'取消加载动画，这时候表格已经渲染完毕。

为<el-table>标签添加 border、fit 属性可以使表格带有纵向边框和使表格的列的宽度是否自撑开。
通过:data="tableData"设置表格的数据，表格的数据可以直接使用prop="address"来设置对应列内容的字段名，也可以使用自定义列模板，通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。
通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
给<el-table-column> 标签设置header-align="center"和align="center"可使表头和各列内容居中。
为当前行的对象(scope.row)设置一个 isEdit 属性并配合 v-if 和 v-else可巧妙地实现组件之间的切换，但是直接使用row.isEdit = true;赋值发现数据视图并没有更新，即对象的属性不是响应式的，因为 Vue 不能检测对象属性的添加或删除 以及 Vue 不能检测以下变动的数组：