accountTable.vue

<template>
    <div class="party-table">
         <el-table border :data="list" style="width: 100%;height:100%" height="100%">
             <el-table-column
                 label="序号"
                 align="center"
                 width="100">
                   <template slot-scope="scope" >
                       <span>{{ (currentPage-1) * 10 * scope.$index + 1}}</span>
                   </template>    
             </el-table-column>   
             <el-table-column           
                align="center"
                v-for="(item,index) in feildList" 
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width">
                <template slot-scope="scope" >
                    <div v-if="item.isEdit" class="table-btn-group">
                        <el-tooltip content="修改" placement="top">
                            <el-button circle  @click="handleOperate(scope.row,'edit')">
                                <i class="icon-table icon-edit"></i>
                            </el-button>
                        </el-tooltip>
                         <el-tooltip content="重置密码" placement="top">
                            <el-button circle @click="handleOperate(scope.row,'reset')">
                               <i class="icon-table icon-reset"></i>
                            </el-button>
                        </el-tooltip>
                         <el-tooltip content="禁用" placement="top">
                            <el-button circle @click="handleOperate(scope.row,'disable')">
                                <i class="icon-table icon-disable"></i>
                            </el-button>
                        </el-tooltip>
                       <el-tooltip content="激活" placement="top">
                            <el-button circle @click="handleOperate(scope.row,'enable')">
                                <i class="icon-table icon-enable"></i>
                            </el-button>
                        </el-tooltip>
                    </div>
                    <div v-else>
                        <span>{{scope.row[item.prop]}}</span>
                    </div>
                </template>
            </el-table-column>
    </el-table>
    </div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    props:{
        currentPage:{
            type:Number,
            default:1
        },
        list:{
            type:Array,
            default:()=>{return []}
        },
        feildList:{
            type:Array,
            default:()=>{return []}
        }
    },
    methods:{
        handleOperate(row,type){
            this.$emit(
                "action",
                {
                  row:row,
                  type:type
                }
            )
        }
    }
}
</script>
<style lang="less">
  @import '../../../style/table.less';
 
</style>