• eltable上增加一个搜索框


    添加代码:

            <div style="padding: 10px 0px">
              <!--prefix-icon="el-icon-user",表示加一个搜素图标,设置在头-->
              <!--suffix-icon="el-icon-tickets"",表示加一个搜素图标,设置在尾-->
              <!--placeholder="请输入内容"",表示设置一个默认显示提示文字内容-->
              <el-input style=" 200px" placeholder="请输入人名" prefix-icon="el-icon-user"></el-input>
              <el-input style=" 200px" placeholder="请输入标题" suffix-icon="el-icon-tickets" class="ml-5"></el-input>
              <el-input style=" 200px" placeholder="请输入url"  prefix-icon="el-icon-link " class="ml-5"></el-input>
              <el-button class="ml-5" type="primary">搜索</el-button>
            </div>

    添加后的el-main的代码

          <el-main>
            <div style="padding: 10px 0px">
              <!--prefix-icon="el-icon-user",表示加一个搜素图标,设置在头-->
              <!--suffix-icon="el-icon-tickets"",表示加一个搜素图标,设置在尾-->
              <!--placeholder="请输入内容"",表示设置一个默认显示提示文字内容-->
              <el-input style=" 200px" placeholder="请输入人名" prefix-icon="el-icon-user"></el-input>
              <el-input style=" 200px" placeholder="请输入标题" suffix-icon="el-icon-tickets" class="ml-5"></el-input>
              <el-input style=" 200px" placeholder="请输入url"  prefix-icon="el-icon-link " class="ml-5"></el-input>
              <el-button class="ml-5" type="primary">搜索</el-button>
            </div>
            <el-table :data="tableData">
              <el-table-column prop="date" label="日期" width="140">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="address" label="地址">
              </el-table-column>
            </el-table>
            <div style="padding: 10px 0px">    <!--内边距空一些-->
              <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage4"
                      :page-sizes="[5, 10, 15, 20]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="400">
              </el-pagination>
              <!--1.page-sizes一般设置为5,101520-->
              <!--1.page-size一般设置为10,即每页10个-->
            </div>
          </el-main>
  • 相关阅读:
    JUC并发工具包之Semaphore
    Linux命令
    uWSGI
    数据库 MySQL 练习
    c++
    c++ 初阶
    Git
    MySQl 和 Redis
    MySQL 查询
    MySQL 命令
  • 原文地址:https://www.cnblogs.com/jingzaixin/p/16390287.html
Copyright © 2020-2023  润新知