轮播图修改2

src/Manager/components/Carousel.vue

@@ -8,7 +8,7 @@
         </a-space>
     </div>
 
-    <a-table :row-selection="rowSelection" :columns="columns"  :data-source="states.data" :pagination="pagination" :scroll="{ x: 1000, y: 430}" style="width: 85vw;">
+    <a-table :row-selection="rowSelection" :columns="columns"  :data-source="states.data" :pagination="pagination" :scroll="{  y: 430}" style="width: 85vw;">
 
 
         <template #bodyCell="{ column, record }">
@@ -28,6 +28,13 @@
             <template v-else-if="column.key === 'photo'">
                     <img :src="record.image" alt="" style="width: 50px;height: 50px;text-align: center">
             </template>
+            <template v-else-if="column.key === 'image'">
+                <div :style="ellipsis ? { width: '250px' } : {}" class="image-cell">
+                    <a-tooltip v-if="ellipsis" :title="record.image">
+                        <div class="ellipsis-text">{{ record.image }}</div>
+                    </a-tooltip>
+                </div>
+            </template>
 
         </template>
     </a-table>
@@ -107,6 +114,23 @@
         </a-form-item>
     </a-modal>
 </template>
+<style>
+
+.image-cell {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 设置显示的行数 */
+    overflow: hidden;
+}
+
+.ellipsis-text {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 设置显示的行数 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>
 <script setup>
 import {computed, createVNode, onMounted, reactive, ref} from 'vue';
 import {
@@ -123,6 +147,7 @@ import requests from "../../public/request.js";
 // const onChange = pageNumber => {
 //     console.log('Page: ', pageNumber);
 // };
+const ellipsis = ref(true);
 const open = ref(false);
 const addopen = ref(false);