当前位置: article > 正文

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

作者：weixin_40725706 | 2024-04-15 06:34:03

踩

template scope


<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="

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/426265

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

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