在table中实现多行提示

如何在table中实现多行提示

前言

HI,这里是zijing. 本次要讲解的是在使用DevExtreme中的DxDataGrid组件时实现鼠标触碰显示多行数据的效果如下图

实现

 const columnData = [
      {
        key:"CompanyName",
        title:"公司名称"
      },
      {
        key:"Address",
        title:"地址"
      },
      {
        key:"City",
        title:"城市"
      },
      {
        key:'PhoneType',
        title:'电话',
        cellRenderer:({ rowData }: any) =>{
             const slots = {
                content: () => {              
                    return <>{
                      rowData.Phone.map((item: any) => {
                        return <div>{item}</div>
                    })
                    }
                    </>
                }
            }
            return <>
            <el-tooltip  v-slots={slots}>
                      {rowData.PhoneType}
              </el-tooltip> 
              {/* <div>
                {rowData}
              </div> */}
            </>
            
        }
      } ,{
        key:"City",
        title:"城市"
      },
    ];

因为使用的是jsx语法在cellRenderer 函数里 如果利用template采用具名插槽会报错这是因为它是vue的语法 因此使用 v-solt的形式

const slots = {
                content: () => {              
                    return <>{
                      rowData.Phone.map((item: any) => {
                        return <div>{item}</div>
                    })
                    }
                    </>
                }
            }

将名为 slots 的对象传递给el-tooltip组件的插槽。这个对象中的属性名对应于子组件中定义的插槽名称

以下附赠剩余代码

 <DxDataGrid
      :data-source="data"
      key-expr="ID"
      :show-borders="true"
      :style="{ maxHeight: '600px' }"
    >
      <!-- <DxSorting mode="none"/>
      <DxScrolling mode="virtual"/> -->
      <DxColumn
      v-for="item in columnData"
       :caption="item.title" alignment="left"
                :cell-template="!!item.cellRenderer ? 'columnCell' : ''"
      />
    <template #columnCell="{ data: cellData }">
      <component :is="cellRender(cellData)" :rowData="cellData.data" :cellData="cellData">
      </component>
    </template>
    </DxDataGrid>

 const cellRender = (cellData: any) => {
            return columnData.filter((i: any) => i.title === cellData.column.caption)[0].cellRenderer
        }

tips 记得将 将script标签的lang 改为tsx

<script lang="tsx">