关于element中表格和表单的封装方式

目录

• pc端基础的表格组件的封装
• pc端基础的表单组件的封装
• 表格的样式
• 表单的样式
• 混入的封装
• 将以上三个文件挂在到main.js中
• 组件的使用
• 1·基础案例
• 2·特殊案例
• 3·特殊案例3
• 4·特殊案例

pc端基础的表格组件的封装

list.vue

pc端基础的表单组件的封装

elForm.vue

表格的样式

table.scss

// base-list表格通用样式
.table {
  // height: 100%;
  background: transparent;
  .el-table__row {
    background-color: #0b2570 !important;
    color: #959abb;
    border: none;
  }
  /* 奇数行 */
  .el-table__row:nth-of-type(odd) > td {
    background-color: #0b2570;
  }
  /* 偶数行 */
  .el-table__row:nth-of-type(even) > td {
    background-color: #051b54 !important;
  }
  // 分页
  .el-pagination {
    float: right;
    margin: 10px;
  }
  // 操作列
  .operate-group {
    display: flex;
    flex-wrap: wrap;
    .item {
      display: block;
      // flex: 0 0 50%;
      margin: 0 5px;
    }
  }
  .el-table__empty-block {
    background-color: #161a3d;
    color: #fff;
  }
  .el-loading-mask {
    background: transparent;
  }
  .el-table__expand-icon {
    color: #959abb !important;
  }
}

表单的样式

element.scss

// 修改分页样式
.paginationClass {
  position: absolute;
  bottom: 12px;
  right: 14px;
  .el-pagination__total,
  .el-pagination__jump {
    color: #959abb;
  }
  .el-select--mini {
    margin-top: -10px;
  }
  .el-input__inner {
    // background-color: #0d102a;
    background-color: rgba(1, 15, 48, 0.3);
    border-color: #2a3259;
    color: #959abb;
  }
  .btn-prev,
  .el-pager .number,
  .btn-next {
    background-color: #0d102a;
  }
  .el-pager .number {
    color: #959abb;
  }
  .el-pager .number:hover {
    color: #fff;
  }
  .el-pager .active {
    color: #fff;
  }
  .btn-next:hover,
  .btn-prev:hover {
    color: #409eff;
  }
  .btn-next,
  .btn-prev {
    color: #fff;
  }
  button:disabled {
    color: #959abb;
    background-color: transparent;
  }
  .el-icon {
    background-color: transparent;
    color: #959abb;
  }
  .el-icon-d-arrow-right {
    color: #fff;
  }
  .el-icon:hover {
    color: #fff;
  }
  .el-icon-arrow-up:hover {
    color: #fff;
  }
}
// el-menu 折叠框隐藏
.customer-left-menu {
  .el-submenu__title {
    display: none !important;
  }
}
// 修改消息通知页面推送对象样式
.disabledArea.el-textarea.is-disabled .el-textarea__inner {
  background-color: #252950 !important;
}
// 修改推送对象穿梭组件样式
.transfer-left,
.transfer-right {
  background-color: #0e1233 !important;
  border: none !important;
  .transfer-title {
    background-color: #0e1233 !important;
    color: #fff !important;
    border-bottom: 1px solid #092749 !important;
  }
  .el-tree {
    background-color: #0e1233 !important;
    color: #fff;
    .el-tree-node.is-current {
      .el-tree-node__content {
        background-color: #2f356a !important;
      }
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: transparent;
    }
    .el-tree-node__content {
      background-color: transparent;
    }
    .el-tree-node__content:hover,
    .el-tree-node__content:active {
      background-color: #2f356a;
    }
    .el-tree-node__content:visited {
      background-color: #0e1233;
    }
  }
}

混入的封装

index.js

// 表格通用方法
const listMixin = {
  name: 'mixin',
  data() {
    return {
      // 分页参数
      pagination: {
        page: 1,
        pageSize: 10,
      },
    }
  },
  computed: {
    defaultOption() {
      return {
        // 分页参数
        pagination: {
          page: 1,
          pageSize: 10,
        },
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.tableData.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    // 默认时间
    timeDefault() {
      const date = new Date()
      let defalutStartTime = date.getTime() - 0 * 24 * 3600 * 1000 // 转化为时间戳
      let defalutEndTime = date.getTime()
      const startDateNs = new Date(defalutStartTime)
      const endDateNs = new Date(defalutEndTime)
      // 月，日 不够10补0
      defalutStartTime =
        startDateNs.getFullYear() +
        '-' +
        (startDateNs.getMonth() + 1 >= 10
          ? startDateNs.getMonth() + 1
          : '0' + (startDateNs.getMonth() + 1)) +
        '-' +
        (startDateNs.getDate() >= 10 ? startDateNs.getDate() : '0' + startDateNs.getDate())
      defalutEndTime =
        endDateNs.getFullYear() +
        '-' +
        (endDateNs.getMonth() + 1 >= 10
          ? endDateNs.getMonth() + 1
          : '0' + (endDateNs.getMonth() + 1)) +
        '-' +
        (endDateNs.getDate() >= 10 ? endDateNs.getDate() : '0' + endDateNs.getDate())
      return [defalutStartTime, defalutEndTime]
    },
  },
  methods: {
    // 返回首页
    goBack() {
      if (sessionStorage.getItem('selectMenuValue')) {
        // 省级消息通知页和服务区投诉建议页的缓存
        sessionStorage.removeItem('selectMenuValue')
      }
      if (sessionStorage.getItem('searchData')) {
        sessionStorage.removeItem('searchData')
      }
      if (sessionStorage.getItem('searchPageIndex')) {
        sessionStorage.removeItem('searchPageIndex')
      }
      if (sessionStorage.getItem('searchPageSize')) {
        sessionStorage.removeItem('searchPageSize')
      }
      if (sessionStorage.getItem('reportMenu_scroll')) {
        sessionStorage.removeItem('reportMenu_scroll')
      }
      if (JSON.parse(localStorage.getItem('user')).restId) {
        this.$router.replace({ name: 'RestHome' })
      } else {
        this.$router.replace({ name: 'Home' })
      }
      // this.$router.push({ name: 'Home' })
    },
    // 查询
    search() {
      this.total = 0
      this.pageIndex = 1
      this.pagination.page = 1
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 切换每页显示的数量
    handleSizeChange(pagination) {
      this.pagination = pagination
      this.getDataList()
    },
    // 切换页码
    handleIndexChange(pagination) {
      this.pagination = pagination
      this.getDataList()
    },
    // 返回列表页并刷新
    // refreshDataList(val) {
    //   this.addOrUpdateVisible = false
    //   if (val) this.getDataList()
    // }
  },
}
export default listMixin

将以上三个文件挂在到main.js中

import listMixin from '@/util/mixin' // 查询分页
Vue.mixin(listMixin) // 混入 相当于选项合并

组件的使用

1·基础案例

2·特殊案例

要是有一条数据需要展示图片:

使用基础的list应该这样配置

  columns: [
        {
          prop: 'name',
          label: '服务区名称',
        },
		............
        {
          prop: 'restPhoto',
          label: '服务区照片',
          render: (h, params) => {
            if (params.row.restPhoto && params.row.restPhoto !== '') {
              return h(
                'el-button',
                {
                  attrs: {
                    type: 'text',
                    size: 'small',
                  },
                  on: {
                    click: () => {
                      this.magnify(params.row.restPhoto)
                    },
                  },
                },
                '查看'
              )
            } else {
              return h(
                'el-link',
                {
                  props: {
                    type: 'info',
                    underline: false,
                  },
                },
                '-'
              )
            }
          },
        },
        {
          prop: 'thirdUrlPath',
          label: '第三方服务区平台链接',
        },
      ],
      methods:{
          // 点击查看放大图片
		    magnify(item) {
		      // console.log(item)
		      this.dialogMagnifyVisible = true
		      this.magnifyPhoto = item
		  },
     }

3·特殊案例3

 {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            return h('el-switch', {
              props: {
                value: params.row.status,
                activeValue: '1',
                inactiveValue: '0',
              },
              on: {
                change: () => {
                  this.changestatus(params.row)
                },
              },
            })
          },
        },
        {
          prop: '',
          label: '重置密码',
          render: (h, params) => {
            return h(
              'el-button',
              {
                attrs: {
                  type: 'text',
                  size: 'small',
                },
                on: {
                  click: () => {
                    this.restPassWords(params.row)
                  },
                },
              },
              '重置密码'
            )
          },
        },
		methods：{
		 changestatus(val) {
		      let params = {
		        userId: val.userId,
		        status: val.status === '1' ? '0' : '1',
		      }
		      api.updateUserStatus(params).then(res => {
		        if (res.code == 0) {
		          this.getDataList()
		        }
		      })
		    },
		}

4·特殊案例

一列中根据接口返回的不同状态展示不同的颜色

组件：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。