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>
阅读 5.6k
3 个回答

你第一段不都写出来了吗

<el-table
    ref="multipleTable"
    :data="userData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
    >
        <template  v-for="col in cols" >
          <el-table-column :prop="col.prop" :label="col.label" width="col.width" ></el-table-column>
        </template>
    </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" :type="col.selection" :formatter="col.formatter">
        <template slot-scope="scope" v-if="col.label==='姓名'">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </template>
 <template slot-scope="scope" v-if="col.label==='操作'">
          <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>
     
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题