Elemnt-ui Table组件及＜template scope=“scopeData“＞的使用理解

码龄5年

关注

原创最新推荐文章于 2024-07-16 15:22:19 发布 2.3k 阅读

element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值阅读详情

<el-table
    :data="tableData" // 绑定数据源，scope="scopedData"中scopedData的数据也来源于此
    stripe  //stripe属性可以创建带斑马纹的表格
    border // 使表格带有边框
    style="width: 50%" // 设置所占屏幕的宽度 一般设置为50%
>
    // 通过 el-table-column 设置表格一列的信息 
    <el-table-column
      prop="date"  // 渲染 数据源 tableData 中 的 data属性到页面
      label="日期" // 这一列的表头名
      width="180"> // 设置对应宽度
    </el-table-column>

    //若单独设置一个 type="index" 的 el-table-column 则可以起到索引的效果
    <el-table-column type="index"></el-table-column>

    //  type="expand" 可以展开下栏的列表
    // 将想要点击下栏栏展示的内容写在 <el-table-column type="expand"> 内部
    <el-table-column type="expand">
             <template scope="scopeData">
                <el-tag
                  v-for="(item, index) in scopeData.row.attr_vals"
                  :key="index"
                  closable
                  @close="handleClose(index,scopeData.row)"
                >
                  {{ item }}
                </el-tag>
             </template>
    </el-table-column>
</el-table>

Table标签绑定数据源后主要通过 el-table-column 来设置对应列的内容

通过设置 el-table-column 的type来控制列表的类型

个人对<template scope="scopeData">的理解

首先这个组件一定要有一个数据源比如 Table标签中的 :data 属性 scope="scopeData"中的scopeData与组件标签所绑定的数据源是相同的。

而数据源一般都是对象数组的形式存储数据，通过scopeData.row 可以获取到这个对象数组中的每一个对象，再通过scopeData.row.属性名获取到这个对象中的属性值。

scopeData.row可以当作函数形参传给回调函数进行使用，可以用来循环渲染等一系列操作。

完整代码参考

<el-table :data="manyTableData" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand">
              <template scope="scopeData">
                <el-tag
                  v-for="(item, index) in scopeData.row.attr_vals"
                  :key="index"
                  closable
                  @close="handleClose(index,scopeData.row)"
                >
                  {{ item }}
                </el-tag>
                <!-- 可编辑的tag标签 -->
                <el-input
                  class="input-new-tag"
                  v-if="scopeData.row.inputVisible"
                  v-model="scopeData.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scopeData.row)"
                  @blur="handleInputConfirm(scopeData.row)"
                >
                </el-input>
                <!-- 添加新Tag标签按钮 -->
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scopeData.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template scope="scopeData">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="mini"
                  @click="showEditDialog(scopeData.row.attr_id)"
                  >修改</el-button
                >
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  @click="removeParams(scopeData.row.attr_id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

收录于