Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.0k views
in Technique[技术] by (71.8m points)

vue怎么用for循环动态生成的el-table代码?

<el-table
            ref="multipleTable"
            :data="userData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border
    >
      <el-table-column
              v-for="col in cols"
              :prop="col.prop" :label="col.label" width="col.width" >
      </el-table-column>
    </el-table>

怎么用for循环动态生成下面的el-table代码

<el-table
            ref="multipleTable"
            :data="userData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            border
    >
      <el-table-column
              v-for="col in cols"
              :prop="col.prop" :label="col.label" width="col.width" >
      </el-table-column>
      <el-table-column type="selection" width="55" ></el-table-column>
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column
              label="姓名"
              width="100">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

你第一段不都写出来了吗


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...