<template>
? <div class="tableCon" id="tableCon">
? ? <el-table
? ? :data="dataSource"
? ? :height="tableHeight"
? ? v-loading="loading"
? ? show-overflow-tooltip
? ? ref="multipleTable"
? ? class="multipleTable"
? ? @selection-change="selectionCchange"
? ? :key="key">
? ? ? <!-- 表格多選框 -->
? ? ? <el-table-column
? ? ? ? v-if="selectShow"
? ? ? ? type="selection"
? ? ? ? align="center"
? ? ? ? >
? ? ? </el-table-column>
? ? ? <!-- 表格單選框 -->
? ? ? <el-table-column
? ? ? ? v-if="radioShow && !selectShow">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-radio v-model="radioVal" @change.native="getRow(scope.row)"></el-radio>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <!-- 序號(hào)-自定義序號(hào)列 -->
? ? ? <el-table-column
? ? ? ? v-if="indexShow"
? ? ? ? type="index"
? ? ? ? align="center"
? ? ? ? label="序號(hào)"
? ? ? ? fixed="left"
? ? ? ? :width="indexWidth">
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <span>{{(page - 1) * size + scope.$index + 1}}</span>
? ? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <!-- 表格數(shù)據(jù)列 -->
? ? ? <el-table-column
? ? ? ? align="center"
? ? ? ? v-for="(cloumn,index) in tableCloumns"
? ? ? ? :key="index"
? ? ? ? :label="cloumn.title"
? ? ? ? :prop="cloumn.prop"
? ? ? ? :show-overflow-tooltip="cloumn.tooltipDisplay">
? ? ? ? <!-- 表格枚舉 -->
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <span v-if="cloumn.prop==='status'">{{scope.row.status==='1'?'是':'否'}}</span>
? ? ? ? ? <span v-else>{{ scope.row[cloumn.prop]}}</span>
? ? ? ? </template>
? ? ? ? <!-- 二級(jí)表頭 -->
? ? ? ? <template ?v-for="(columnChildren,i) in cloumn.children">
? ? ? ? ? <el-table-column
? ? ? ? ? ? :key="i"
? ? ? ? ? ? :label="columnChildren.title"
? ? ? ? ? ? :prop="columnChildren.prop"
? ? ? ? ? ? :show-overflow-tooltip="columnChildren.tooltipDisplay"
? ? ? ? ? ? align="center">
? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? <!-- 二級(jí)表頭枚舉 -->
? ? ? ? ? ? ? <span v-if="columnChildren.prop==='exit'">{{scope.row.exit==='1'?'是':'否'}}</span>
? ? ? ? ? ? ? <span v-else>{{scope.row[columnChildren.prop] || '--'}}</span>
? ? ? ? ? ? </template>
? ? ? ? ? </el-table-column>
? ? ? ? </template>
? ? ? </el-table-column>
? ? ? <!-- 操作列 -->
? ? ? <el-table-column
? ? ? ? v-if="tableOperaDisplay"
? ? ? ? :width="tableOperaWidth"
? ? ? ? label="操作"
? ? ? ? align="center"
? ? ? ? fixed="right">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <span
? ? ? ? ? ? class="font-small font-color-light operationSpan"
? ? ? ? ? ? v-if="detailOperaDisplay"
? ? ? ? ? ? @click="detailOperaHandle(scope.row)"
? ? ? ? ? ? >{{ tableOperationText1 }}
? ? ? ? ? ? </span>
? ? ? ? </template>
? ? ? </el-table-column>
? ? </el-table>
? </div>
</template>
<script>
import moment from 'moment'
export default {
? props:{
? ? dataSource:{//表格數(shù)據(jù)
? ? ? type:Array,
? ? ? default: () => ([])
? ? },
? ? loading:{
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? selectShow:{//表格多選框
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? radioShow:{//表格單選框
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? indexShow:{//序號(hào)列
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? page:{
? ? ? type:Number,
? ? ? default:1
? ? },
? ? ?size:{
? ? ? type:Number,
? ? ? default:10
? ? },
? ? indexWidth:{//序號(hào)列寬度
? ? ? type:String,
? ? ? default:'100'
? ? },
? ? tableCloumns:{//表格數(shù)據(jù)列
? ? ? type:Array,
? ? ? default: () => ([])
? ? },
? ? tableOperaDisplay:{//表格操作列
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? detailOperaDisplay:{//操作列詳情按鈕
? ? ? type:Boolean,
? ? ? default:false
? ? },
? ? tableOperationText1:{
? ? ? type:String,
? ? ? default:'詳情'
? ? }

? },
? mounted(){

? },
? data (){
? ? return {
? ? ? key:moment().format('YYYY-MM-DD HH:mm:ss'),
? ? ? tableHeight:'100%',
? ? ? radioVal:''
? ? }
? },
? methods: {
? ? detailOperaHandle (rowVal){
? ? ? // console.log(rowVal)
? ? ? this.$emit('detailOperaHandle',rowVal)
? ? },
? ? // 表格多選框事件
? ? selectionCchange (selectValArr){
? ? ? // console.log(selectValArr)
? ? ? this.$emit('selectValArr',selectValArr)

? ? },
? ? getRow (selectRowObj){
? ? ? console.log(selectRowObj)
? ? ? this.$emit('getRow',selectRowObj)
? ? }

? }

}
</script>
<style lang="scss" scoped>
#tableCon{
? height: 100%;
? .multipleTable{
? ? width: 100%;
? ? height: 100%;
? ? overflow: auto;
? }
}
</style>

<template>
? <div id="componentInfo">
? ? <div class="tableCon">
? ? ? <div class="tableArea">
? ? ? ? <tableModule
? ? ? ? :dataSource="tableDatas"
? ? ? ? :tableCloumns="cloumns"
? ? ? ? :loading="false"
? ? ? ? :indexShow="true"></tableModule>
? ? ? </div>
? ? </div>
? </div>
</template>
<script>
import tableModule from '@/components/public-tables'

export default {
? components:{
? ? tableModule
? },
? props:{

? },
? data (){
? ? return {
? ? ? tableDatas:[
? ? ? ? {name:'小花',sex:'女',age:'19',status:'1',school1:'1',school2:'2',exit:'1'},
? ? ? ? {name:'小朵',sex:'女',age:'19',status:'0',school1:'1',school2:'2',exit:'0'},
? ? ? ? {name:'小花朵',sex:'女',age:'19',status:'1',school1:'1',school2:'2',exit:'1'}],
? ? ? cloumns:[
? ? ? ? {
? ? ? ? ? title:'姓名',
? ? ? ? ? prop:'name'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop:'sex',
? ? ? ? ? title:'性別'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop:'age',
? ? ? ? ? title:'年齡'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop:'status',
? ? ? ? ? title:'是否在線'
? ? ? ? },
? ? ? ? {
? ? ? ? ? prop:'school',
? ? ? ? ? title:'學(xué)校',
? ? ? ? ? children:[
? ? ? ? ? ? {
? ? ? ? ? ? ? prop:'school1',
? ? ? ? ? ? ? title:'學(xué)校1'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? prop:'school2',
? ? ? ? ? ? ? title:'學(xué)校2'
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? prop:'exit',
? ? ? ? ? ? ? title:'存在'
? ? ? ? ? ? }
? ? ? ? ? ]
? ? ? ? }
? ? ? ]
? ? }
? }
}
</script>
<style lang="scss" scoped>
#componentInfo{
? width: 100%;
? height: 100%;
? background-color: #fff;
? padding: 10px;
? .tableCon{
? ? width: 100%;
? ? height: 100%;
? ? .tableArea{
? ? ? width: 100%;
? ? ? height: 100%;
? ? }
? }
}
</style>