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

来源：oschina

链接：https://my.oschina.net/u/4383176/blog/4270226

标签

sortable

popover

Vue.js

arrow

tooltip