element适配方案

最新推荐文章于 2024-08-19 09:45:11 发布
小曲曲
最新推荐文章于 2024-08-19 09:45:11 发布
阅读量1.3k
点赞数
分类专栏： element 文章标签： js 前端性能优化
本文链接：https://blog.csdn.net/weixin_43848576/article/details/123228400
版权
element 专栏收录该内容
22 篇文章 0 订阅
订阅专栏
在这里插入图片描述
<template>
  <div>
    <el-card>
      <el-divider content-position="left">横向排列form表单</el-divider>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="110px">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域"> 
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域加长版">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">横向排列form表单：input加上clearable属性就会和select一样长</el-divider>
      <el-divider content-position="left">横向排列form表单：input和select属性size设置为small，按钮size为mini</el-divider>
      <el-form :model="formInline" ref="queryForm" :inline="true" label-width="110px">
        <el-form-item label="岗位编码" prop="postCode">
          <el-input
            v-model="formInline.user"
            placeholder="请输入岗位编码"
            clearable
            size="small"
            @keyup.enter.native="onSubmit"
          />
        </el-form-item>
        <el-form-item label="岗位名称" prop="postName">
          <el-input
            v-model="formInline.user"
            placeholder="请输入岗位名称"
            clearable
            size="small"
            @keyup.enter.native="onSubmit"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formInline.status" placeholder="岗位状态" clearable size="small">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="onSubmit">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="onSubmit">重置</el-button>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">栅格布局</el-divider>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
      </el-row>
      <el-divider content-position="left">间隔：:gutter="20"，所有列加起来依然是24，每列之前间隔20</el-divider>
      <el-row :gutter="20">
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-divider content-position="left">偏移：:offset="3"，所有列加偏移量之和为24，有偏移量的列向右偏移</el-divider>
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="5" :offset="3"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-divider content-position="left">flex布局：row标签定义type="flex"属性，justify 属性来指定 start, center, end, space-between, space-around</el-divider>
      <el-row type="flex" justify="center">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" justify="space-between">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      </el-row>
      <el-divider content-position="left">响应式布局：参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs < 768 、 768=< sm < 992 、 992 =< md < 1200 、 1200 =< lg < 1920 和 xl>=1920</1920></el-divider>
      <el-row>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
        <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
        <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      <el-divider content-position="left">栅格布局结合form表单</el-divider>
      <div id="solo">
        <el-form :inline="true" :model="formInline" class="demo-form-inline " label-width="110px">
          <el-row >
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审批人">
                <el-input clearable v-model="formInline.user" placeholder="审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="活动区域"> 
                <el-select clearable v-model="formInline.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审批人">
                <el-input clearable v-model="formInline.user" placeholder="审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="活动区域">
                <el-select clearable v-model="formInline.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审批人">
                <el-input clearable v-model="formInline.user" placeholder="审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="活动区域"> 
                <el-select clearable v-model="formInline.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="审批人">
                <el-input clearable v-model="formInline.user" placeholder="审批人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="活动区域">
                <el-select clearable v-model="formInline.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="24" :xl="24" style="display:flex;justify-content:flex-end;">
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-divider content-position="left">媒体查询：其他常用的分辨率适配</el-divider>
      <el-row type="flex" justify="start">
        <el-col :span="12">
          <el-card>
            <div>常见电脑屏幕分辨率. <br>（常见8.9寸电脑使用）<br>1024x768（常见10.4、12.1、14.1、15寸电脑使用）4:3<br>1280x1024（常见14.1、15寸电脑使用）5:4
            <br> 1280x800（常见10.8、12.1、15.4寸电脑使用）16:10<br> 1366x768（常见15.2寸电脑使用）15:10.
            <br> 1440x1050（常见14.1、15寸电脑使用）4:3<br> 1600x1200（常见15、16.1寸电脑使用）4:3</div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div> 默认设置body为粉色；当屏幕宽度在480px到580px之间，body为绿色； 当屏幕宽度大于580px时，body显示为黄色；</div>
            <pre style="color:rgb(3, 153, 133)">
              body {
                background-color: pink;
              }

              @media screen and (min-width: 480px) {
                body {
                  background-color: lightgreen;
                }
              }
              @media screen and (min-width: 580px) {
                body {
                  background-color: yellow;
                }
              }
            </pre>
          </el-card>
        </el-col>
      </el-row>
      <el-divider content-position="left">表格：列省略显示，鼠标放上去显示</el-divider>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="索引"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider content-position="left">表格：列设置最小宽度min-width，操作栏右侧固定显示</el-divider>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="索引"
          type="index"
          width="80">
        </el-table-column>
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          min-width="420"
          >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          min-width="420"
          >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: '',
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄上海市普陀区金沙江路 1518 弄'
      }]
    };
  },
  mounted() {},
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  },
};
</script>
<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  ::v-deep #solo .el-form--inline .el-form-item{
    display: flex !important;
  }
</style>