Vue 动态表格+插入自定义表头
程序员文章站
2022-03-06 10:37:38
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'}, ]
上一篇: 兼容移动pc的上传头像截取插件
推荐阅读
-
Vue 固定头 固定列 点击表头可排序的表格组件
-
layui table动态表头 改变表格头部 重新加载表格
-
vue表格实现固定表头首列
-
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
-
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
-
Vue 自定义动态组件实例详解
-
Vue.js实现表格动态增加删除的方法(附源码下载)
-
vue+element创建动态的form表单.以及动态生成表格的行和列
-
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
-
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信