fix : 修复列表页面搜索框排版

src/views/system/role/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
+  <fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px"></fvSearchForm>
   <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
 </template>
 
@@ -50,7 +50,7 @@ const searchConfig = ref([
     prop: 'subCompanyId',
     component: 'el-tree-select',
     props: {
-      placeholder: '请输入',
+      placeholder: '请选择公司名称',
       clearable: true,
       data: [],
       filterable: true,
@@ -63,7 +63,7 @@ const searchConfig = ref([
     prop: 'roleName',
     component: 'el-input',
     props: {
-      placeholder: '请输入',
+      placeholder: '请输入角色名称',
       clearable: true
     }
   },
@@ -72,7 +72,7 @@ const searchConfig = ref([
     prop: 'roleKey',
     component: 'el-input',
     props: {
-      placeholder: '请输入',
+      placeholder: '请输入权限字符',
       clearable: true
     }
   },
@@ -81,27 +81,27 @@ const searchConfig = ref([
     prop: 'state',
     component: shallowRef(fvSelect),
     props: {
-      placeholder: '请选择',
+      placeholder: '请选择状态',
       clearable: true,
       cacheKey: 'normal_disable',
       remote: true,
       filterable: true
     }
   },
-  {
-    label: '登录时间',
-    prop: 'dateValue',
-    component: 'el-date-picker',
-    props: {
-      placeholder: '请选择',
-      clearable: true,
-      type: 'datetimerange',
-      startPlaceholder: '开始日期',
-      endPlaceholder: '结束日期',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-      shortcuts: shortcuts
-    }
-  },
+  // {
+  //   label: '登录时间',
+  //   prop: 'dateValue',
+  //   component: 'el-date-picker',
+  //   props: {
+  //     placeholder: '请选择',
+  //     clearable: true,
+  //     type: 'datetimerange',
+  //     startPlaceholder: '开始日期',
+  //     endPlaceholder: '结束日期',
+  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  //     shortcuts: shortcuts
+  //   }
+  // },
 ])
 
 const tableIns = ref()
@@ -114,6 +114,13 @@ const auths = {
 
 const tableConfig = reactive({
   columns: [
+    {
+      prop: 'index',
+      type: 'index',
+      label: '序号',
+      align: 'center',
+      width:85
+    },
     {
       prop: 'roleName',
       label: '角色名称',
@@ -133,26 +140,30 @@ const tableConfig = reactive({
       prop: 'template',
       label: '是否为模版角色',
       align: 'center',
+      width:150,
       showOverflowTooltip: false,
       currentRender: ({row, index}) => (<Tag dictType={'yes_no'} value={row.template ? '1' : '0'} />)
     },
     {
       prop: 'roleSort',
       label: '显示顺序',
-      align: 'center'
+      align: 'center',
+      width:100,
     },
     {
       prop: 'state',
       label: '状态',
       showOverflowTooltip: false,
       align: 'center',
+      width:100,
       currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state} />)
     },
     {
       prop: 'oper',
       label: '操作',
-      align: 'right',
+      align: 'center',
       fixed: 'right',
+      width:150,
       showOverflowTooltip: false,
       currentRender: ({row, index}) => {
         let btn = [{label: '修改', auth: auths.edit, func: ()=>handleEdit(row) , type: 'primary'}]
@@ -270,7 +281,24 @@ const init = async () => {
 init()
 
 </script>
+<style scoped lang="scss">
+:deep(.el-table__header) {
+  .is-leaf:first-child {
+    .cell {
+      margin-left: -25px !important;
+    }
+  }
+}
 
-<style lang="scss" scoped>
-
+:deep(.el-table__body) {
+  .el-table__cell:first-child {
+    .cell {
+      margin-left: -13px !important;
+    }
+  }
+}
+:deep(.el-col-5:nth-child(4).el-col-offset-1){
+  margin-left: 35px !important;
+}
 </style>
+