element ui el-talbe应用实例
微wx笑
2022-07-15【前端开发】
5
0关键字：
element ui el-talbe 应用实例
这是一个混合实例，不显示表头，只有一例，采用自定义模板，模板中使用 v-if 条件渲染，根据条件显示不同的样式；但是当你只需要一列，完全希望根据自己的模板来渲染，不需要表格的任何特性的话，就不如使用 v-for 来渲染。
element ui el-talbe应用实例
这是一个混合实例，不显示表头，只有一例，采用自定义模板，模板中使用 v-if 条件渲染，根据条件显示不同的样式；
<el-table
v-loading="loading"
:data="projectList"
:show-header="false"
style="width: 100%; background: #E9EAED;"
:header-cell-style="{background:'#70b6ff',color:'#FFF',fontSize:'16px'}"
:cell-style="handleCellStyle"
@row-click="handleRowClick"
empty-text="项目列表">
<el-table-column
prop="id"
label="">
<template slot-scope="scope">
<div v-if="scope.row.is_default==1" style="width:100%; background:rgb(64,187,125);color: white; border-radius: 20px; padding: 20px; font-size: 18px; line-height: 30px;">
<h1 style="line-height:50px;">{{scope.row.pname}}</h1>
<div class="el-row" style="margin-left: -10px; margin-right: -10px; border-bottom:1px solid white;">
<div class="el-col el-col-12" style="padding-left: 10px; padding-right: 10px;">期初：{{scope.row.time_qc}}</div>
<div class="el-col el-col-12" style="padding-left: 10px; padding-right: 10px;">期末：{{scope.row.time_qm}}</div>
<div class="el-col el-col-17" style="padding-left: 10px; padding-right: 10px;">创建于：{{scope.row.time_qc}}</div>
<div class="el-col el-col-7" style="padding-left: 10px; padding-right: 10px;">共：{{scope.row.acount}}条账单</div>
</div>
<div class="el-row" style="margin-left: -10px; margin-right: -10px;">
<div class="el-col el-col-17" style="padding-left: 10px; padding-right: 10px;">
<p><i class="el-icon-check" style="background: white;color: green;font-size: 20px; border-radius: 13px;
padding: 3px;"></i>当前项目
</p>
</div>
<div class="el-col el-col-7" style="padding-left: 10px; padding-right: 10px;">
<el-button size="small" @click.stop="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
<el-button size="small" @click.stop="handleDelete(scope.row)"><i class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
<div v-if="scope.row.is_default==0" style="width:100%; background:white;color:black;border-radius: 20px; padding: 20px; font-size: 18px; line-height: 30px;">
<h1 style="line-height:50px;">{{scope.row.pname}}</h1>
<div class="el-row" style="margin-left: -10px; margin-right: -10px; border-bottom:1px solid white;">
<div class="el-col el-col-12" style="padding-left: 10px; padding-right: 10px;">期初：{{scope.row.time_qc}}</div>
<div class="el-col el-col-12" style="padding-left: 10px; padding-right: 10px;">期末：{{scope.row.time_qm}}</div>
<div class="el-col el-col-17" style="padding-left: 10px; padding-right: 10px;">创建于：{{scope.row.time_qc}}</div>
<div class="el-col el-col-7" style="padding-left: 10px; padding-right: 10px;">共：{{scope.row.acount}}条账单</div>
</div>
<div class="el-row" style="margin-left: -10px; margin-right: -10px;">
<div class="el-col el-col-17" style="padding-left: 10px; padding-right: 10px;">
<p v-if="scope.row.is_default==0"><i class="el-icon-check" style="background: white;color: white;font-size: 20px; border-radius: 13px;
padding: 3px;"></i>切换为当前项目
</p>
</div>
<div class="el-col el-col-7" style="padding-left: 10px; padding-right: 10px;">
<el-button size="small" @click.stop="handleEdit(scope.row)"><i class="el-icon-edit"></i></el-button>
<el-button size="small" @click.stop="handleDelete(scope.row)"><i class="el-icon-delete"></i></el-button>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>但是当你只需要一列，完全希望根据自己的模板来渲染，不需要表格的任何特性的话，就不如使用 v-for 来渲染。
<div v-for="item in list">{{item}}</div>
<div v-for="(item,index) in list">{{item}}---{{index}}</div>
<div v-for="(value,key,index) in firstObject">{{value}}---{{key}}---{{index}}</div>
<div v-for="(value,index) in list" :key="index">{{value}}---{{index}}</div>
<button @click="handle">增加</button>本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-07-15/1309.html
