Parcourir la source

fix: 调整首页勤务执行模块表格的列宽,使其文字可以正常显示;同时设置文字过长时自动省略,鼠标停留出现title样式

sequoia tungfang il y a 3 jours
Parent
commit
32d645c700
1 fichiers modifiés avec 12 ajouts et 11 suppressions
  1. 12 11
      src/views/Home.vue

+ 12 - 11
src/views/Home.vue

@@ -228,20 +228,21 @@ export default {
       ],
       // 1. 表头
       tableColumns: [
-        { label: '序号', key: 'id', width: '60px' },
-        { label: '名称', key: 'name' },
-        { label: '执行人', key: 'executor' },
-        { label: '等级', key: 'level' },
-        { label: '状态', key: 'status' },
-        { label: '操作', key: 'action', width: '80px' }
+        { label: '序号', key: 'id', width: '14%' },
+        { label: '名称', key: 'name', width: '20%' },
+        { label: '执行人', key: 'executor', width: '18%' },
+        { label: '等级', key: 'level', width: '14%' },
+        { label: '状态', key: 'status', width: '20%' },
+        { label: '操作', key: 'action', width: '14%' }
       ],
+
       // 2. 模拟数据源
       tableData: [
-        { id: 1, name: '测试', executor: '测试', level: '一级', status: '未开始' },
-        { id: 2, name: '张飞', executor: '张飞', level: '一级', status: '未开始' },
-        { id: 3, name: '关将', executor: '关将', level: '二级', status: '进行中' },
-        { id: 4, name: '刘备', executor: '刘备', level: '一级', status: '未开始' },
-        { id: 5, name: '孙权', executor: '孙权', level: '一级', status: '未开始' },
+        { id: 1, name: '大型活动交通安保', executor: '测试', level: '一级', status: '未开始' },
+        { id: 2, name: '道路施工路段交通引导张飞', executor: '张飞', level: '一级', status: '未开始' },
+        { id: 3, name: '酒驾醉驾专项查缉', executor: '关将', level: '二级', status: '进行中' },
+        { id: 4, name: '交通信号灯故障排查', executor: '刘备', level: '一级', status: '未开始' },
+        { id: 5, name: '应急救援通道清障', executor: '孙权', level: '一级', status: '未开始' }
       ],
       // 1. 表头
       keyIntersectionColumns: [