zoukankan      html  css  js  c++  java
  • Vue 动态表格+插入自定义表头

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

    <!-- 表格 -->
    <el-table
            :data="templateData"
            style=" 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',  'auto', minWidth: 150 },
        { label: 'Create Time', prop: 'CreateTime',  'auto'},
        { label: 'End Time', prop: 'FinishedTime',  'auto'},
        { label: 'Creator', prop: 'CreateUser',  'auto'},
        { label: 'Progress', prop: 'per',  'auto'},
        { label: 'Actions', prop: 'Actions',  '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'},
    ]
  • 相关阅读:
    Apache 配置多站点访问「为项目分配二级域名」
    php封装的mysqli类完整实例
    PHP实现链式操作的三种方法详解
    php实现简单链式操作mysql数据库类
    PHP PDO_MYSQL 链式操作 非链式操作类
    23个数据库常用查询语句
    微信小程序表单弹窗实例
    ES6 && ECMAScript2015 新特性
    ES6新语法概览
    sql将两个日期之间的日子全列出来
  • 原文地址:https://www.cnblogs.com/nelsonlei/p/12844618.html
Copyright © 2011-2022 走看看