element ui中slot

最新推荐文章于 2024-01-03 10:00:00 发布

原创最新推荐文章于 2024-01-03 10:00:00 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了Element UI框架中自定义模板与Slot的使用方法，通过实例展示了如何利用scoped slot实现数据展示的个性化定制，包括表格列的自定义显示与交互增强。

input:

https://element.eleme.cn/#/zh-CN/component/input

自定义模板

使用scoped slot自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。

scope.$index scope.row

                <el-table-column label="序号" width="100">
                    <template slot-scope="scope">
                        <span>{{pageData.pageSize*(pageData.currentPage-1)+scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="预警信号名称" :show-overflow-tooltip=true>
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" :content="scope.row.signalName+'得分区间：'+(scope.row.ruleDesc || '-')" placement="right-start">
                            <div class='singnal-level' :class='scope.row.level=="一级"?"singnal-level1":(scope.row.level=="二级"?"singnal-level2":(scope.row.level=="三级"?"singnal-level3":""))'>{{ scope.row.signalName+' | '+scope.row.level }}</div>
                        </el-tooltip>  
                    </template>
                </el-table-column>
                <el-table-column  prop="entName" label="企业名称" :show-overflow-tooltip=true v-if='dataFlag==1'> 
                    <template slot-scope="scope">
                        <span class='ent-name' @click='goToEntPortrait'>{{ scope.row.entName}}</span>
                    </template>
                </el-table-column>

总结：slot 跟自定义有关