Vue 动态表格+插入自定义表头
Posted nelsonlei
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 动态表格+插入自定义表头相关的知识,希望对你有一定的参考价值。
Vue 动态表格+插入自定义表头
<!-- 表格 --> <el-table :data="templateData" style="width: 100%;" stripe ref="templateTable" :empty-text="$t(‘basic.noData‘)" @filter-change="filterTable" @sort-change="sortData"> <template v-for="(item, index) in tableHeaders"> <el-table-column v-if=‘item.prop == "per"‘ :key=‘index‘ :label=‘item.label‘ :prop=‘item.prop‘ :width="item.width" sortable> <template slot-scope="scope"> <el-progress class="NewCMMonitorPro" :text-inside="true" :percentage="70" :width="scope.row.width"></el-progress> </template> </el-table-column> <el-table-column v-else-if=‘item.prop == "Actions"‘ :key=‘index‘ :label=‘item.label‘ :prop=‘item.prop‘ :width="item.width" sortable> <template slot-scope="scope"> <el-button size="mini" type="text" @click="handleEdit(scope.row)" style="color: #1E90FF;font-size: 14px;"> <i class="el-icon-notebook-2" style="font-size: 15px;" title="More"></i> <!--More--> </el-button> <el-button size="mini" type="text" plain @click="handleDelete(scope.row)" style="color: #1E90FF;font-size: 14px;"> <i class="el-icon-delete" style="font-size: 15px;" title="Delete"></i> <!--Delete--> </el-button> </template> </el-table-column> <el-table-column v-else :key="index" :prop="item.prop" :label="item.label" :column-key="item.prop" :min-width="item.minWidth" :width="item.width" show-overflow-tooltip sortable> </el-table-column> </template> <!-- 过滤 --> <el-table-column width="40" align="center" :filters="filters" filter-placement="bottom" column-key="filter"> <template slot="header"> <el-popover placement="left" trigger="hover" content="FILTER" :visible-arrow="false"> <i slot="reference" class="el-icon-setting" style="cursor: pointer;"></i> </el-popover> </template> </el-table-column> </el-table>
// 表格数据 templateData: [], // 表格遍历 tableHeaders: [ { label: ‘Description‘, prop: ‘Des‘, width: ‘auto‘, minWidth: 150 }, { label: ‘Create Time‘, prop: ‘CreateTime‘, width: ‘auto‘}, { label: ‘End Time‘, prop: ‘FinishedTime‘, width: ‘auto‘}, { label: ‘Creator‘, prop: ‘CreateUser‘, width: ‘auto‘}, { label: ‘Progress‘, prop: ‘per‘, width: ‘auto‘}, { label: ‘Actions‘, prop: ‘Actions‘, width: ‘80‘} ], // 过滤表格 filters: [ { text: ‘Description‘, value: ‘Des‘}, { text: ‘Create Time‘, value: ‘CreateTime‘}, { text: ‘End Time‘, value: ‘FinishedTime‘}, { text: ‘Creator‘, value: ‘CreateUser‘}, { text: ‘Progress‘, value: ‘per‘}, { text: ‘Actions‘, value: ‘Actions‘}, ]
以上是关于Vue 动态表格+插入自定义表头的主要内容,如果未能解决你的问题,请参考以下文章
Ant Design of Vue —— Table表格组件 —— 设置动态表头