element-ui 表格行数据的处理

想要下图button可点击跳转的状态：（逻辑写在模板中）

<el-table :data="signData.records" style="width: 100%" height="100%" >
    <el-table-column prop="deviceId" label="设备号" width="400" key="bb"></el-table-column>
   <el-table-column label="打卡用户" key="aa">
        <template slot-scope="scope">
           <el-button-group v-for="(item,index) in scope.row.records" :key="index">
           // 处理为A、B、C的格式
             <el-button type="text" @click="handleClick(scope.row,item)">
                <span>{
   
   {item.realName}}</span>
                <i v-if="index < (scope.row.records.length - 1)">、</i>
              </el-button>            
           </el-button-group>
         </template>  
    </el-table-column>
 </el-table>

同样的样式，但是不用做点击效果（逻辑写在methods里）

<el-table :data="signData.records" style="width: 100%" height="100%">
   <el-table-column prop="title" label="姓名" width="180">
       <template slot-scope="scope">
         <el-button type="text" @click="handleClick2(scope.row)">{
   
   {scope.row.realName}}</el-button>
          </template>  
   </el-table-column>
   <el-table-column prop="jobNumber" label="工号" width="180"></el-table-column>
   <el-table-column prop="userCode" label="账号" width="180"></el-table-column>
  <el-table-column prop="records" label="设备号" :formatter="formate"></el-table-column>
</el-table>

这里用formate:

   formate:function(row,column,cellValue){
    	let arr = []
    	// cellValue是一个数组
     	cellValue.map(item => {
       		arr.push(item.deviceId)
     	})
     	//join 数组转为字符串
     	return arr.join('、')
   },

element-ui 表格行数据的处理

猜你喜欢