欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue 动态表格+插入自定义表头

程序员文章站 2022-06-27 14:16:07
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'},
]