当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue 动态表格+插入自定义表头

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

2020年05月08日  | 移动技术网IT编程  | 我要评论

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'},
]

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网