Jelajahi Sumber

feat: table文字过长,增加toolTip提示

sunxiao 1 bulan lalu
induk
melakukan
91e585d5e3
2 mengubah file dengan 19 tambahan dan 4 penghapusan
  1. 8 2
      src/views/voice/notice/index.vue
  2. 11 2
      src/views/voice/services/index.vue

+ 8 - 2
src/views/voice/notice/index.vue

@@ -122,10 +122,10 @@ onMounted(() => {
     <div class="table-card">
       <div style="height: 100%;" ref="tableContainer">
         <el-table :data="tableData" style="width: 100%" :max-height="tableMaxHeight" v-loading="loading">
-          <el-table-column prop="reason" label="停水原因" align="center" :width="320" show-overflow-tooltip/>
+          <el-table-column prop="reason" label="停水原因" align="center" :width="320" :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" />
           <el-table-column prop="timeBegin" label="停水时间" align="center" />
           <el-table-column prop="timeEnd" label="恢复供水时间" align="center" />
-          <el-table-column prop="neighbourhoodName" label="停水范围(小区)" align="center" show-overflow-tooltip></el-table-column>
+          <el-table-column prop="neighbourhoodName" label="停水范围(小区)" align="center" :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" ></el-table-column>
           <el-table-column prop="statusText" label="停水状态" align="center" />
           <el-table-column prop="createBy" label="创建人" align="center" />
           <el-table-column prop="createTime" label="创建时间" align="center" />
@@ -202,4 +202,10 @@ onMounted(() => {
   }
 }
 
+</style>
+
+<style lang="scss">
+.custom-tooltip-popper {
+  width: 500px;
+}
 </style>

+ 11 - 2
src/views/voice/services/index.vue

@@ -417,7 +417,13 @@ onMounted(() => {
         <div class="table-card" ref="tableContainer">
           <el-table :data="tableData" style="width: 100%" max-height="calc(100vh - 376px)" v-loading="loading">
             <el-table-column prop="name" label="小区名称" align="center" />
-            <el-table-column prop="buildingsNames" label="楼号" align="center" />
+            <el-table-column
+              prop="buildingsNames"
+              label="楼号"
+              align="center" 
+              :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" 
+              width="200"
+            />
             <el-table-column prop="address" label="地址" align="center" />
             <el-table-column prop="pumpingStationNames" label="关联泵站" align="center">
               <template #default="scope">
@@ -498,7 +504,7 @@ onMounted(() => {
                 </p>
               </template>
             </el-table-column>
-            <el-table-column prop="neighbourhoodAndBuildings" label="关联小区" align="center" />
+            <el-table-column prop="neighbourhoodAndBuildings" label="关联小区" align="center" width="300" :show-overflow-tooltip="{'popper-class': 'custom-tooltip-popper'}" />
             <el-table-column prop="createBy" label="创建人" align="center" />
             <el-table-column prop="createTime" label="创建时间" align="center" />
             <el-table-column prop="address" label="操作" align="center" width="200">
@@ -933,4 +939,7 @@ onMounted(() => {
 .relation-dialog {
   padding: 16px 0;
 }
+.custom-tooltip-popper {
+  width: 500px;
+}
 </style>