element中表格和表單的封裝方式是什么

這篇文章主要介紹了element中表格和表單的封裝方式是什么的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇element中表格和表單的封裝方式是什么文章都會有所收獲，下面我們一起來看看吧。

pc端基礎的表格組件的封裝

list.vue

<!--region 封裝的分頁 table-->
<template>
  <div class="table">
    <!-- <el-card shadow="always" class="card-table"> -->
    <el-table
      id="iTable"
      ref="mutipleTable"
      v-loading.iTable="options.loading"
      highlight-current-row
      :data="list"
      :stripe="options.stripe"
      :row-key="rowKey"
      :row-class-name="rowClassName"
      :header-cell-style="{
        'text-align': 'center',
        background: '#051b54',
        color: '#EBEBEB',
        'font-weight': '400',
      }"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      >
      <!--region 選擇框-->
      <el-table-column v-if="options.mutiSelect" type="selection" :resizable="false" />
      <!--endregion-->
      <!--region 數據列-->
      <template v-for="(column, index) in columns">
        <el-table-column
          :key="column.label"
          :resizable="false"
          :prop="column.prop"
          :label="column.label"
          :align="column.align ? column.align : 'center'"
          :width="column.width"
          :show-overflow-tooltip="column.showOverflowTooltip"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              {{ column.render }}
              <template v-if="column.formatter">
                <span v-html="column.formatter(scope.row, column)" />
              </template>
              <template v-else>
                <span v-if="scope.row[column.prop] && column.prop !== 'icon'">{{
                  scope.row[column.prop]
                }}</span>
                <span v-else-if="scope.row[column.prop] === 0">{{ scope.row[column.prop] }}</span>
                <svg-icon
                  v-else-if="scope.row[column.prop] && column.prop === 'icon'"
                  :icon-class="scope.row[column.prop]"
                  class="header-svg"
                />
                <span v-else>-</span>
              </template>
            </template>
            <template v-else>
              <expand-dom
                :column="column"
                :row="scope.row"
                :render="column.render"
                :index="index"
              />
            </template>
          </template>
        </el-table-column>
      </template>
      <!--endregion-->
      <!--region 按鈕操作組-->
      <el-table-column
        v-if="operates.list.length > 0"
        ref="fixedColumn"
        :resizable="false"
        label="操作"
        align="center"
        :width="operates.width"
        :fixed="operates.fixed"
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="btn in operates.list">
              <div v-if="!btn.show || btn.show(scope.row)" :key="btn.label" class="item">
                <!-- v-if="!btn.isAuth || btn.isAuth()" -->
                <el-button
                  v-if="!btn.isAuth || btn.isAuth()"
                  round
                  :type="btn.type"
                  size="mini"
                  :icon="btn.icon"
                  :disabled="btn.disabled && btn.disabled(scope.row)"
                  :plain="btn.plain"
                  @click.native.prevent="btn.method(scope.row)"
                >
                  {{ btn.label }}
                </el-button>
              </div>
            </template>
          </div>
        </template>
      </el-table-column>
      <!--endregion-->
    </el-table>
    <!-- </el-card> -->
    <!--region 分頁-->
    <el-pagination
      v-show="showPagination"
      v-if="pagination"
      :page-size="tableCurrentPagination.pageSize"
      :page-sizes="tableCurrentPagination.pageArray"
      :current-page="tableCurrentPagination.page"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleIndexChange"
    />
    <!--endregion-->
  </div>
</template>
<!--endregion-->

<script>
const _pageArray = [10, 20, 50] // 每頁展示條數的控制集合
export default {
  name: 'Table',
  components: {
    expandDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, ctx) => {
        const params = {
          row: ctx.props.row,
          index: ctx.props.index,
        }
        if (ctx.props.column) params.column = ctx.props.column
        return ctx.props.render(h, params)
      },
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [], // prop:表頭綁定的地段，label：表頭名稱，align：每列數據展示形式（left, center, right），width:列寬
    }, // 數據列表
    columns: {
      type: Array,
      default: () => [], // 需要展示的列 === prop：列數據對應的屬性，label：列名，align：對齊方式，width：列寬
    },
    rowKey: {
      type: String,
      default: '',
    },
    rowClassName: {
      type: Function,
      default: () => {
        return Function
      },
    },
    operates: {
      type: Object,
      default: () => {}, // width:按鈕列寬，fixed：是否固定（left,right）,按鈕集合 === label: 文本，type :類型（primary / success / warning / danger / info / text），show：是否顯示，icon：按鈕圖標，plain：是否樸素按鈕，disabled：是否禁用，method：回調方法
    },
    options: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        stripe: true, // 是否為斑馬紋 table
        loading: true, // 是否添加表格loading加載動畫
        highlightCurrentRow: true, // 是否支持當前行高亮顯示
        mutiSelect: false, // 是否支持列表項選中功能
      },
    },
    showPagination: {
      type: Boolean,
      default: true,
    },
    // pagination: {
    //   type: Object,
    //   default: {
    //     page: 1,
    //     pageSize: 10
    //   }
    // },
    total: {
      type: Number,
      default: 0,
    },
    // 總數
    otherHeight: {
      type: Number,
      default: 160,
    }, // 計算表格的高度
  },
  data() {
    return {
      tableCurrentPagination: {},
      multipleSelection: [], // 多行選中
    }
  },
  mounted() {
    if (this.pagination && !this.pagination.pageSizes) {
      this.tableCurrentPagination.pageArray = _pageArray // 每頁展示條數控制
    }
    this.tableCurrentPagination = this.pagination || {
      pageSize: this.total,
      page: 1,
    } // 判斷是否需要分頁
  },
  methods: {
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    // 切換每頁顯示的數量
    handleSizeChange(size) {
      if (this.pagination) {
        this.tableCurrentPagination = {
          page: 1,
          pageSize: size,
        }
        this.$emit('handleSizeChange', this.tableCurrentPagination)
        // 跳轉頁面后回頁面頂部
        this.$nextTick(() => {
          this.$refs.mutipleTable.bodyWrapper.scrollTop = 0
          document.body.scrollTop = document.documentElement.scrollTop = 0
        })
      }
    },
    // 切換頁碼
    handleIndexChange(currnet) {
      if (this.pagination) {
        this.tableCurrentPagination.page = currnet
        this.$emit('handleIndexChange', this.tableCurrentPagination)
        // 跳轉頁面后回頁面頂部
        this.$nextTick(() => {
          this.$refs.mutipleTable.bodyWrapper.scrollTop = 0
          document.body.scrollTop = document.documentElement.scrollTop = 0
        })
      }
    },
    // 多行選中
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('handleSelectionChange', val)
    },
    // 顯示 篩選彈窗
    showfilterDataDialog() {
      this.$emit('handleFilter')
    },
    // 顯示 表格操作彈窗
    showActionTableDialog() {
      this.$emit('handelAction')
    },
  },
}
</script>

<style lang="scss" scoped>
.table {
  /deep/tr {
    background-color: transparent !important;
    border-bottom: none !important;
  }
  /deep/ td,
  th.is-leaf {
    border-bottom: none !important;
  }
  /deep/th,
  tr {
    background-color: transparent;
    border-bottom: none !important;
  }
  /deep/ .current-row td {
    background-color: #051b54 !important;
  }
  /deep/ .hover-row td {
    background-color: #051b54 !important;
  }
  /* 鼠標移入表格高亮yanse */
  /deep/ tbody tr:hover > td {
    background-color: #051b54 !important;
  }
  /deep/ tbody tr:hover {
    background-color: #051b54 !important;
  }
  /deep/ .el-table__fixed-right::before,
  .el-table__fixed::before {
    background-color: transparent !important;
  }
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  //去除表格底部白線
  background-color: transparent !important;
}
.el-pagination {
  text-align: right;
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #959abb !important;
  }
  /deep/ .el-input__inner {
    background-color: #0d102a !important;
    border-color: #2a3259;
    color: #959abb;
  }
  /deep/ .btn-prev,
  /deep/ .el-pager .number,
  /deep/ .btn-next {
    background-color: #0d102a !important;
  }
  /deep/ .el-pager .number {
    color: #959abb;
  }
  /deep/ .el-pager .number:hover {
    color: #fff;
  }
  /deep/.el-pager .active {
    color: #fff;
  }
  /deep/ .btn-next:hover,
  /deep/ .btn-prev:hover {
    color: #409eff;
  }
  /deep/ .btn-next,
  /deep/ .btn-prev {
    color: #fff;
  }
  /deep/ button:disabled {
    color: #959abb;
  }
  /deep/ .el-icon {
    background-color: transparent;
    color: #959abb;
  }
  /deep/ .el-icon-d-arrow-right {
    color: #fff;
  }
  /deep/ .el-icon:hover {
    color: #fff;
  }
  /deep/ .el-icon-arrow-up:hover {
    color: #fff;
  }
}
</style>

pc端基礎的表單組件的封裝

elForm.vue

<!--
 * @Descriptin: 修改了一些內容
 * @Version: 1.0
 * @Autor: wxy
 * @Date: 2021-06-29 09:20:09
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-02 15:05:15
-->
<template>
  <el-form
    ref="form"
    :inline="inline"
    :label-width="labelWidth"
    class="datafill-elform"
    :model="baseData"
    :rules="rules"
    @keyup.enter.native="dataFormSubmit(baseData)"
  >
    <el-row>
      <el-col>
        <el-form-item
          v-for="item in baseForm"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :required="item.required"
        >
          <!-- 輸入框 -->
          <el-input
            v-if="item.type === 'Input'"
            v-model="baseData[item.prop]"
            class="input"
            :readonly="item.readonly ? item.readonly : false"
            :type="item.inputType ? item.inputType : 'text'"
            :rows="6"
            :maxlength="item.maxlength ? item.maxlength : 256"
            :disabled="item.disabled"
            :clearable="item.clearable || true"
            :filterable="item.filterable || false"
            :placeholder="item.placeholder"
          />
          <span v-if="item.type === 'Input'" class="itemunit">{{ item.unit }}</span>
          <!-- 輸入框 -->
          <el-input-number
            v-if="item.type === 'InputNumber'"
            v-model="baseData[item.prop]"
            controls-position="right"
            class="input"
            :readonly="item.readonly ? item.readonly : false"
            :type="item.inputType ? item.inputType : 'text'"
            :min="0"
            :precision="item.precision || 2"
            :disabled="item.disabled"
            :clearable="item.clearable || true"
            :placeholder="item.placeholder"
          />
          <span v-if="item.type === 'InputNumber'" class="itemunit">{{ item.unit }}</span>
          <!-- 下拉框 -->
          <el-select
            v-if="item.type === 'Select'"
            v-model="baseData[item.prop]"
            :multiple="item.multiple ? item.multiple : false"
            :collapse-tags="item.collapseTags ? item.collapseTags : false"
            :placeholder="item.placeholder"
            :clearable="item.clearable || true"
            :disabled="item.disabled"
            :popper-append-to-body="false"
            popper-class="select-popper"
            :filterable="item.filterable || false"
            @change="item.change ? item.change(baseData[item.prop]) : changeHandle"
          >
            <el-option
              v-for="op in item.options"
              :key="op.value"
              :label="op.label"
              :value="op.value"
              :disabled="op.disabled"
            />
          </el-select>
          <!-- 單選 -->
          <el-radio-group v-if="item.type === 'Radio'" v-model="baseData[item.prop]">
            <el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{
              ra.label
            }}</el-radio>
          </el-radio-group>
          <!-- 復選框 -->
          <el-checkbox-group v-if="item.type === 'Checkbox'" v-model="baseData[item.prop]">
            <el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{
              ch.label
            }}</el-checkbox>
          </el-checkbox-group>
          <!-- 日期 -->
          <el-date-picker
            v-if="item.type === 'Date'"
            v-model="baseData[item.prop]"
            :picker-options="item.pickerOptions"
            :clearable="item.clearable || true"
            :type="item.dateType ? item.dateType : 'date'"
            :placeholder="item.placeholder"
            range-separator="至"
            :start-placeholder="item.startPlaceholder ? item.startPlaceholder : '開始時間'"
            :end-placeholder="item.endPlaceholder ? item.endPlaceholder : '結束時間'"
            :format="item.format ? item.format : 'yyyy-MM-dd'"
            :value-format="item.format ? item.format : 'yyyy-MM-dd'"
          />
          <!-- 月份 -->
          <el-date-picker
            v-if="item.type === 'Month'"
            v-model="baseData[item.prop]"
            type="month"
            :placeholder="item.placeholder"
            format="yyyy-MM"
            value-format="yyyy-MM"
          />
          <!-- 年份 -->
          <el-date-picker
            v-if="item.type === 'Year'"
            v-model="baseData[item.prop]"
            type="year"
            :placeholder="item.placeholder"
            format="yyyy"
            value-format="yyyy"
          />
          <!-- 文件上傳 -->
          <import-picture
            v-if="item.type === 'Import'"
            ref="importPic"
            :picture.sync="baseData[item.prop]"
          />
        </el-form-item>
        <!-- 按鈕 -->
        <el-form-item v-for="item in searchHandle" :key="item.label">
          <el-button
            v-if="!item.show ? item.show : true"
            :class="item.class"
            :round="item.round"
            :type="item.type"
            size="small"
            @click.native.prevent="item.handle()"
          >
            {{ item.label }}
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
// import ImportPicture from '@/components/ImportPicture'
export default {
  // components: {
  //   ImportPicture
  // },
  props: {
    inline: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: '160px',
    },
    baseForm: {
      type: Array,
      default: () => [],
    },
    baseData: {
      type: Object,
      default: () => {},
    },
    searchHandle: {
      type: Array,
      default: () => [],
    },
    rules: {
      type: Object,
      default: () => {},
    },
    // changeHandle: {
    //   type: Function,
    //   require: false,
    //   default: this.change()
    // }
  },
  mounted() {
    // console.log(this.baseData)
  },
  methods: {
    changeHandle() {
      // console.log('1234567')
    },
    dataFormSubmit(form) {
      this.$emit('dataFormSubmit', form)
    },
  },
}
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 0;
}
.el-input__inner {
  background-color: rgba(1, 15, 48, 0.3);
  border: 0.005051rem solid #093154;
  color: #959abb;
}
.searchButton {
  width: 60px;
  height: 32px;
  background: rgba(9, 12, 38, 0.3);
  border: 1px solid #25407c;
  border-radius: 17px;
  font-size: 14px;
  color: rgba(59, 210, 239, 1);
}
.el-button--primary {
  width: 72px;
  height: 32px;
  background: rgba(49, 99, 168, 0.3);
  border: 1px solid #25407c;
  border-radius: 2px;
}
</style>

表格的樣式

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) // 混入 相當于選項合并

組件的使用

<template>
  <div>
    <div class="DR-right">
      <div class="DR-right-head">
        <base-elform
          label-width="0"
          :inline="true"
          :base-data="searchForm"
          :base-form="baseForm"
          :search-handle="searchHandle"
        />
      </div>
      <div class="DR-right-body">
        <base-list
          :list="list"
          :operates="operates"
          :total="total"
          :options="options"
          :pagination="pagination"
          :columns="columns"
          @handleSizeChange="handleSizeChange"
          @handleIndexChange="handleIndexChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/data'
import baseList from './base-table/list'
import BaseElform from './base-form/elForm'
export default {
  components: {
    baseList,
    BaseElform,
  },
  data() {
    // 表單參數
    return {
      navLeft: {
        title: '卡口數據',
        icon: 'shujubaobiao',
      },
      isRestAuth: true,
      // 查詢表單
      searchForm: {
        restId: '',
        restDirection: '',
        carType: '',
        carNo: '',
        isOut: '',
        startTime: null,
        endTime: null,
        selectTime: [],
      },
      exportOrTakeVisible: false,
      baseForm: [
        {
          type: 'Select',
          placeholder: '篩選服務區方向',
          prop: 'restDirection',
          clearable: true,
          options: [
            { value: '01', label: '方向1' },
            { value: '02', label: '方向2' },
          ],
        },
        {
          type: 'Input',
          placeholder: '請輸入車牌號',
          clearable: true,
          prop: 'carNo',
        },
        {
          type: 'Select',
          placeholder: '篩選車輛類型',
          prop: 'carType',
          clearable: true,
          options: [],
        },
        {
          type: 'Select',
          placeholder: '是否駛離',
          clearable: true,
          prop: 'isOut',
          options: [
            { value: false, label: '否' },
            { value: true, label: '是' },
          ],
        },
        {
          type: 'Date',
          dateType: 'daterange',
          startPlaceholder: '選擇開始時間',
          endPlaceholder: '選擇結束時間',
          clearable: true,
          format: 'yyyy-MM-dd',
          prop: 'selectTime',
        },
      ],
      searchHandle: [
        {
          label: '搜索',
          round: 'round',
          show: true,
          class: 'searchButton',
          handle: () => {
            // 重置分頁組件
            this.total = 0
            this.pageIndex = 1
            this.getDataList()
          },
        },
        {
          label: '導出',
          show: true,
          type: 'primary',
          handle: () => {
            this.excelOut()
          },
        },
      ],
      list: [],
      pageIndex: 1,
      pageSize: 10,
      total: 1,
      options: {},
      columns: [
        {
          prop: 'RestDirection',
          label: '服務區方向',
        },
        {
          prop: 'CarNo',
          label: '車牌號',
        },
        {
          prop: 'CarType',
          label: '車輛類型',
        },
        {
          prop: 'CarNoColor',
          label: '車牌顏色',
          showOverflowTooltip: true,
        },
        {
          prop: 'CarBrand',
          label: '車輛品牌',
          showOverflowTooltip: true,
        },
        {
          prop: 'CarColor',
          label: '車身顏色',
        },
        {
          prop: 'InTime',
          label: '入區時間',
        },
        {
          prop: 'OutTime',
          label: '離區時間',
        },
        {
          prop: 'stayTime',
          label: '在區時長（分）',
        },
      ],
//操作列
      operates: {
        width: 160,
        fixed: 'right',
        list: [
         {
            label: '編輯',
            type: 'text',
            show: () => {
              return true
            },
            method: row => {
              this.addOrUpdateHandle(row.restId)
            },
          },  {
            label: '刪除',
            type: 'text',
            show: () => {
              return true
            },
            method: row => {
              this.deleteHandle(row.restId)
            },
          }]
      },
    }
  },
  mounted() {
    this.searchForm.selectTime = this.timeDefault
    this.searchForm.restId = JSON.parse(sessionStorage.getItem('store')).areaId
    this.getCarList()
    this.getreastdire()
    this.getDataList()
  },
  methods: {
    getCarList() {
      api.getCarTypeData(null).then(res => {
        if (res.code == '0' || res.code == 0) {
          this.baseForm[2].options = res.data
        } else {
          this.list = []
          this.total = 0
        }
      })
    },
    getreastdire() {
      let params = {
        restId: this.searchForm.restId,
      }
      api.getRestDirection(params).then(res => {
        if (res.code == '0' || res.code == 0) {
          this.baseForm[0].options = res.data
        } else {
          this.list = []
          this.total = 0
        }
      })
    },
    getDataList() {
      this.dataListLoading = true
      let params = {
        restId: this.searchForm.restId,
        restDirection: this.searchForm.restDirection,
        carNo: this.searchForm.carNo,
        carType: this.searchForm.carType,
        isOut: this.searchForm.isOut,
        page: this.pageIndex,
        pageSize: this.pageSize,
        startTime: this.searchForm.selectTime ? this.searchForm.selectTime[0] + ' 00:00:00' : null,
        endTime: this.searchForm.selectTime ? this.searchForm.selectTime[1] + ' 23:59:59' : null,
      }
      api.PostBayonetData(params).then(res => {
        if (res.code == '0' || res.code == 0) {
          this.list = res.data.list
          this.total = res.data.totalCount
        } else {
          this.list = []
          this.total = 0
        }
        this.dataListLoading = false
      })
    },
    handleSizeChange(pageObj) {
      this.pageIndex = pageObj.page
      this.pageSize = pageObj.pageSize
      this.getDataList()
    },
    handleIndexChange(pageObj) {
      this.pageIndex = pageObj.page
      this.pageSize = pageObj.pageSize
      this.getDataList()
    },
    // 導出
    excelOut() {
      window.location.href = `${api.baseUrl}/v1/rest/car/record/excel?restId=${
        this.searchForm.restId
      }&restDirection=${this.searchForm.restDirection}&carNo=${this.searchForm.carNo}&isOut=${
        this.searchForm.isOut
      }&carType=${this.searchForm.carType}&startTime=${
        this.searchForm.selectTime ? this.searchForm.selectTime[0] + ' 00:00:00' : ''
      }&endTime=${this.searchForm.selectTime ? this.searchForm.selectTime[1] + ' 23:59:59' : ''}`
    },
  },
}
</script>

1·基礎案例

<template>
  <div class="DR-right">
    <div class="DR-right-head">
      <div class="sys_title">角色管理</div>
      <base-elform
        label-width="0"
        :inline="true"
        :base-data="searchForm"
        :base-form="baseForm"
        :search-handle="searchHandle"
      />
    </div>
    <div class="DR-right-body">
      <base-list
        :list="list"
        :operates="operates"
        :total="total"
        :options="options"
        :columns="columns"
        :pagination="pagination"
        @handleSizeChange="handleSizeChange"
        @handleIndexChange="handleIndexChange"
      />
    </div>
    <editDialog
      class="addUpdatedialog"
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></editDialog>
  </div>
</template>

<script>
import api from '@/api/admin'
import editDialog from './role_AddOrUpdated.vue'
export default {
  components: { editDialog },
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    // 表單參數
    return {
      addOrUpdateVisible: false,
      // 查詢表單
      searchForm: {
        roleName: '',
      },
      baseForm: [
        {
          type: 'Input',
          placeholder: '角色名稱',
          clearable: true,
          prop: 'roleName',
        },
      ],
      searchHandle: [
        {
          label: '搜索',
          round: 'round',
          show: true,
          class: 'searchButton',
          handle: () => {
            // 重置分頁組件
            this.total = 0
            // 點擊查詢回到第一頁
            this.pagination.page = 1
            this.getDataList()
          },
        },
        {
          label: '新增',
          show: true,
          type: 'primary',
          handle: () => {
            this.addOrUpdateHandle()
          },
        },
      ],
      list: [],
      total: 1,
      options: {},
      columns: [
        {
          prop: 'roleId',
          label: 'ID',
        },
        {
          prop: 'roleName',
          label: '角色名稱',
        },
        {
          prop: 'remark',
          label: '備注',
        },
        {
          prop: 'createTime',
          label: '創建時間',
        },
      ],
      operates: {
        width: 150,
        fixed: 'right',
        list: [
          {
            label: '編輯',
            type: 'text',
            show: () => {
              return true
            },
            method: row => {
              this.addOrUpdateHandle(row.roleId)
            },
          },
          {
            label: '刪除',
            type: 'text',
            show: () => {
              return true
            },
            method: row => {
              this.deleteHandle(row.roleId, row.roleName)
            },
          },
        ],
      },
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.dataListLoading = true
      let params = {
        roleName: this.searchForm.roleName,
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
      }
      api.getRoleDataList(params).then(res => {
        this.dataListLoading = false
        if (res.code == '0' || res.code == 0) {
          this.list = res.page.list
          this.total = res.page.totalCount
        } else {
          this.list = []
          this.total = 0
        }
      })
    },
    addOrUpdateHandle(val) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(val)
      })
    },
    deleteHandle(id, roleName) {
      this.$confirm(`確定對角色名稱為：[${roleName}]進行[刪除]操作?`, '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          api.deleteRoleDataList(id).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '刪除成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.pagination.page = 1
                  this.getDataList()
                },
              })
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

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·特殊案例

一列中根據接口返回的不同狀態展示不同的顏色

組件：

<template>
      <div class="DR-right-body">
        <base-elform
          
          label-width="0"
          :inline="true"
          :base-data="searchForm"
          :base-form="baseForm"
          :search-handle="searchHandle"
        />
        <base-list
          headerHeight="63vh"
          :list="list"
          :operates="operates"
          :total="total"
          :options="options"
          :columns="columns"
          :cellStyle="cellStyle"
          :show-pagination="paginationShow"
          @handleSizeChange="handleSizeChange"
          @handleIndexChange="handleIndexChange"
        />
      </div>
    </div>
</template>

<script>
  methods: {
 //重點代碼
    cellStyle({ row, columnIndex }) {
      if (row.congestionType === '1' && columnIndex === 9) {
        return 'color: #16a692 '
      } else if (row.congestionType === '2' && columnIndex === 9) {
        return 'color: #c58d3b'
      } else if (row.congestionType === '3' && columnIndex === 9) {
        return 'color: #bd4337'
      } else {
        return
      }
    },
}
</script>

<style lang="scss" scoped>
.DR-right-head {
  display: flex;
  flex-wrap: wrap;
  height: 105px !important;
  box-sizing: border-box;
  .compaire {
    box-sizing: border-box;
    font-size: 20px;
    color: #33bee7;
    width: 100%;
    margin: 5px 0;
  }
  .left_container {
    width: 660px;
    height: 64px;
    background: #051134;
    .base-elform {
      margin-top: 10px;
      padding: 0 10px;
    }
  }
}
</style>

關于“element中表格和表單的封裝方式是什么”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“element中表格和表單的封裝方式是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。