el-table-column单元格内容换行,tooltip样式更改

初始化数据(数组对象):

tableData:[

{

associated_subject:  ['刘杰', '公司名称'],

issuer: ['刘红',''张三','公司名称']

num_value: 134472.64

petition_summary: "测试数据"

},

]

 

html代码

<el-table :data="tableData"  border height="520" style="width: 100%">

               <el-table-column prop="petition_summary" label="测" class="petition_summary" :show-overflow-tooltip="true" />

               <el-table-column  label="测试" width="240">

                  <template v-slot="scope">

                    <div  v-for="(item,index) in scope.row.issuer"  :key="item.label">

                      <div  :data-title="item" class="content-text">{{scope.row.issuer.length>1?index+1+'.':''}}  {{item}}</div>

                    </div>

                </template>

               </el-table-column>

               <el-table-column label="测试2" width="240">

                  <template v-slot="scope">

                    <div v-for="(item,index) in scope.row.associated_subject"  :key="item.label"  >

                      <div :data-title="item" class="content-text" >{{scope.row.associated_subject.length>1?index+1+'.':''}}  {{item}}</div>

                    </div>

                </template>

               </el-table-column>

               <el-table-column prop="num_value" label="测试4" width="150" />

             </el-table>

1.如果只需给当前单元格做tooltip,直接在el-table-column加 :show-overflow-tooltip="true" 即可

2.动态渲染需要拆分单元格,展示出来比较难看,又想换行还需要每列单独展示的情况,可以参照上面  <template>中的代码

3.tooltip展示效果  修改默认的样式