【element-ui】表格

效果展示

组件代码

    <el-table class="compTableClass" ref="tableOOOOO":class="('className' in tableConfig)?tableConfig.className:''":data="tableConfig.data" :height="tableConfig.height" style="width: 100%"highlight-current-row@row-click="tableTRclickFun"@selection-change="handleSelectionChange"><el-table-column type="selection" width="60" v-if="tableConfig.checkbox"></el-table-column><el-table-column align="center" label="选择" width="100" v-if="('radius' in tableConfig)"><template slot-scope="scope"><el-radio class="radioOOOClass" :label="scope.row['id']" v-model="tableRadio" @change.native="getCurrentRow(scope.row)"></el-radio></template></el-table-column><el-table-column type="index" align="center" width="60" label="序号" v-if="tableConfig.index"></el-table-column><el-table-column align="center"v-for="(item2,index2) in tableConfig.head" :key="index2":label="item2.label":width="('width' in item2)?item2.width:'auto'":min-width="('width' in item2)?item2.width:'auto'"><template slot-scope="scope"><span v-if="item2.type==61" class="spanIMG"><img :src="(scope.row[item2.prop]&&scope.row[item2.prop].length>0)?scope.row[item2.prop]:require('@/assets/images/srchResult/zOtherpp999.png')"@error="$commonOpt.errorImageShow($event)"/><span v-if="('bkKey' in item2)&&(scope.row[item2.bkKey]==1)">已布控</span></span><span v-if="item2.type==6266" class="spanText1_66" :title="scope.row[item2.prop]" :style="('maxWidth' in item2)?{'max-width':item2.maxWidth}:{}">{{ scope.row[item2.prop] }}</span><span v-if="item2.type==62" class="spanText1" :title="scope.row[item2.prop]" :style="('maxWidth' in item2)?{'max-width':item2.maxWidth}:{}">{{ scope.row[item2.prop] }}</span><span v-if="item2.type==63" class="spanText2">{{ scope.row[item2.prop] }}</span><span v-if="item2.type==64" class="spanText3">{{ scope.row[item2.prop] }}</span><span v-if="item2.type==65" class="spanIMG2"><img :src="item2.list[scope.row[item2.prop]]['img']"/></span><span v-if="(item2.type==66)&&(item2.list[scope.row[item2.prop]])" class="spanText4"><span :style="{'background':item2.list[scope.row[item2.prop]]['bgColor']}">{{ item2.list[scope.row[item2.prop]]['label'] }}</span><span v-if="'prop2' in item2" style="margin-left:5px;">({{scope.row[item2.prop2]}}次)</span></span><span v-if="item2.type==67" class="spanText1">{{ scope.row[item2.prop].split(" ")[0] }}<br/>{{ scope.row[item2.prop].split(" ")[1] }}</span><span v-if="(item2.type==68)&&(scope.row[item2.prop].length>0)" class="spanText4"><span style="background:#E60012">{{ scope.row[item2.prop] }}</span><span v-if="'prop2' in item2" style="margin-left:5px;">({{scope.row[item2.prop2]}}次)</span></span><span v-if="(item2.type==680)&&(scope.row[item2.prop].length>0)" class="spanText4Root"><span class="spanText4" v-for="(tt,ii) in scope.row[item2.prop]" :key="ii"><span style="background:#E60012">{{ tt }}</span></span></span><span v-if="(item2.type==88)&&(item2.list[scope.row[item2.prop]])" class="spanText4"><span :style="{'background':item2.list[scope.row[item2.prop]]['bgColor']}">{{ item2.list[scope.row[item2.prop]]['label'] }}</span></span><span v-if="item2.type==98" class="spanIMG9"><img v-for="(item98,index98) in item2.btns" :key="index98" :title="('tt' in item98)?(item98.list[scope.row[item98.val]]['title']):item98.title":src="('tt' in item98)?(item98.list[scope.row[item98.val]]['img']):item98.img" :style="{'width':item98.wh[0]+'px','height':item98.wh[1]+'px'}"v-show="('ss' in item98)?(scope.row[item98['ss']]):true"@click.stop="tableEventFun(item2,scope.row,item98)"/></span><span v-if="item2.type==99" class="spanBtn"><span v-for="(item99,index99) in item2.btns" :key="index99"v-show="('ss' in item99)?(scope.row[item99['ss']]):true"@click.stop="tableEventFun(item2,scope.row,item99)">{{ ('tt' in item99)?(item99.list[scope.row[item99.val]]['text']):item99.text }}</span></span></template></el-table-column></el-table>

模拟数据

    initTable() {let list = [];for (let i = 0; i < 20; i++) {list.push({id: i,img: "",xm: "***",dz: "河北省石家庄市桥西区红旗大街123号",bfb: "99.9%",hm: "130999999999999999",lx: Math.floor(Math.random() * 2 + 1),lx2: Math.floor(Math.random() * 2 + 1),lx2NN: Math.floor(Math.random() * 99),lal:["类型1","类型2","类型3"],time: "2023-09-06 17:08:30",zt:Math.floor(Math.random() * 2 + 1),noInfo: Math.floor(Math.random() * 2 + 1), //1-有数据；2-无数据});}this.tableConfig.data = this.tableCardList;}

配置参数

    【data】tableConfig: {height: 690,index: true,checkbox: true,head: [{ type: 61, prop: "img", label: "照片",width:"200px" },{ type: 62, prop: "xm", label: "姓名",width:"200px" },{ type: 6266, prop: "dz", label: "地址",maxWidth:"100px" ,width:"200px"},{ type: 63, prop: "bfb", label: "相似度",width:"200px" },{ type: 64, prop: "hm", label: "证件号码" ,width:"200px"},{type: 65,prop: "lx",label: "类型",width:"200px",list: {1: {img: require("@/assets/images/srchResult/table_td_1_1.png"),},2: {img: require("@/assets/images/srchResult/table_td_1_2.png"),},},},{type: 66,prop: "lx2",prop2: "lx2NN",label: "类型",width:"200px",list: {1: { label: "类型1", bgColor: "#E60012" },2: { label: "类型2", bgColor: "#FA913D" },},},{ type: 680, prop: "lal", label: "类型",width:"200px" },{ type: 67, prop: "time", label: "结算时间",width:"200px" },{type: 88,prop: "zt",label: "任务状态",width:"200px",list: {1: { label: "进行中", bgColor: "#6aa84f" },2: { label: "已停止", bgColor: "#cccccc" },},},{type: 98,btns: [{mm: 1,title: "画像",img: require("@/assets/images/srchResult/table_1.png"),wh: [20, 20],},{mm: 2,title: "详情",img: require("@/assets/images/srchResult/table_2.png"),wh: [24, 18],},{mm: 3,title: "删除",img: require("@/assets/images/srchResult/table_3.png"),wh: [18, 20],},],label: "操作",width:"200px",},{type: 99,btns: [{ mm: 1, text: "查看" }],label: "操作",width:"200px",},],data: [],}【回调方法】//表格-按钮回调tableEventCallback(item, data, item2) {if (item2) {debugger;}},