• elementUI:在eltablecolumn中用prop属性来对应对象中的键名即可填入数据


    根据elementUI中的,当el-table元素中注入data对象数组后,在el-table-column中用prop属性来对应对象中的键名即可填入数据,

    <el-table ref="multipleTable" :data="list" style=" 100%" size="small" v-loading="listLoading" border
                    row-key="id" :tree-props="{children: 'children',hasChildren: 'hasChildren'}" :indent="20">
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="ID" v-if="false"></el-table-column>
            <el-table-column label="页面路径" prop="page"></el-table-column>
            <el-table-column label="路由" prop="path"></el-table-column>
            <el-table-column label="图标" align="center" width="150">
              <template slot-scope="scope">
                <svg-icon v-if="scope.row.icon"  class="svg-icon-M2class" :icon-class="scope.row.icon"  />
              </template>
            </el-table-column>
    <!--        <el-table-column label="顺序" align="center" prop="seq" width="100">-->
    <!--        </el-table-column>-->
            <el-table-column label="顺序" align="center" width="100px">
              <template slot-scope="scope">{{ scope.row.seq }}</template>
            </el-table-column>
          </el-table>

    当使用prop属性时,代码如下

    <el-table-column label="顺序" align="center" prop="seq" width="100">
            </el-table-column>

    当不适用prop属性时代码如下:

    <el-table-column label="顺序" align="center" width="100px">
              <template slot-scope="scope">{{ scope.row.seq }}</template>
            </el-table-column>

    两相比较,使用prop属性时,代码简洁很多。

  • 相关阅读:
    Solution -「USACO 2020.12 P」Spaceship
    Solution -「USACO 2020.12 P」Sleeping Cows
    Solution -「HDU #6566」The Hanged Man
    Solution -「JOISC 2019」「LOJ #3036」指定城市
    HTML5 之required修改默认提示
    Js 之内容加密
    小程序 之生成接口签名
    Js 之Api接口验签
    View.js 之加载动画
    View.js 之跳转动画
  • 原文地址:https://www.cnblogs.com/zwh0910/p/15672729.html
Copyright © 2020-2023  润新知