vue 搜索、下拉、分页列表组件

最新推荐文章于 2024-10-28 10:31:01 发布

陈卿诺语

最新推荐文章于 2024-10-28 10:31:01 发布

阅读量679

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/code_nutter/article/details/125417655

版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

先看效果图

以下代码直接复制就可行

<template>
  <div>
    <div style="width: 100%;height: 100px;">
      <div style="margin-top: 30px;margin-left: 30px;float: left;">
        拼团状态：
        <!-- 下拉框 -->
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>

      <!-- 搜索 -->
      <div style="margin-top: 30px;margin-left: 30px;float: left;width: 600px;">
        <div style="float: left;margin-top: 10px;">
          商品搜索：
        </div>
        <div style="width: 300px;float: left">
          <!-- 下拉框 -->
          <el-input v-model="input" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 添加拼团商品 -->
    <el-button type="primary" style="float: left; margin-left: 30px;margin-bottom: 25px;">添加拼团商品</el-button>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="date">
      </el-table-column>
      <el-table-column label="拼团图片" prop="name">
      </el-table-column>
      <el-table-column label="拼团名称" prop="date">
      </el-table-column>
      <el-table-column label="原价" prop="name">
      </el-table-column>
      <el-table-column label="拼团价" prop="date">
      </el-table-column>
      <el-table-column label="拼团人数" prop="name">
      </el-table-column>
      <el-table-column label="参与人数" prop="date">
      </el-table-column>
      <el-table-column label="成团数量" prop="name">
      </el-table-column>
      <el-table-column label="限量" prop="date">
      </el-table-column>
      <el-table-column label="限量剩余" prop="name">
      </el-table-column>
      <el-table-column label="结束时间" prop="date">
      </el-table-column>
      <el-table-column label="拼团状态">
        <template slot-scope="{row}">
          <el-switch v-model="row.shelf_state" class="switch" :active-value="1" :inactive-value="0"
            @change="handleStatusChange($event, row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="block" style="margin-right: 50px;float:right;">
      <span class="demonstration">完整功能</span>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
    }
  }
}
</script>