vue+element 实现全选和取消全选 --文章列表

最新推荐文章于 2023-01-28 16:02:21 发布
最新推荐文章于 2023-01-28 16:02:21 发布
阅读量614 收藏 2
点赞数
分类专栏： vue+element 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/renwenz/article/details/108778078
版权

先看效果图

在这里插入图片描述
在这里插入图片描述

代码实现

<!--  -->
<template>
  <div class="html">
    <Headers></Headers>
    <div class="container">
      <!-- 搜索区域 -->
      <div class="search">
        <div class="input-box">
          <div id="DBFieldBox" class="sort reopt">
            <div class="sort-default" @click="toggleTypeShow">
              <span>{{typeList[typeIndex-1].name}}</span>
              <i class="sort-icon">▼</i>
            </div>
            <div id="DBFieldList" class="sort-list" v-show="isType">
              <ul>
                <li
                  v-for="(item,index) in typeList"
                  :key="index"
                  @click="toggleType(item.type)"
                  :class="typeIndex == item.type ?'active cur':'cur'"
                >{{item.name}}</li>
              </ul>
            </div>
          </div>
          <input
            id="txt_SearchText"
            name="txt_SearchText"
            type="text"
            autocomplete="off"
            placeholder="中文文献、外文文献"
            @keyup.enter="search"
            value
            v-model="searchVal"
            maxlength="100"
            class="search-input"
            style="color: rgb(125, 125, 125);"
          />
        </div>
        <div class="btns">
          <button @click="search">搜索</button>
          <button @click="resultSearch">在结果中搜索</button>
          <button @click="goSenior">高级搜索</button>
        </div>
      </div>
      <div class="radio">
        <el-radio v-model="radio" label="1">标题</el-radio>
        <el-radio v-model="radio" label="2">全文</el-radio>
        <el-radio v-model="radio" label="3">标签</el-radio>|
        <el-radio v-model="type" label="1">精确搜索</el-radio>
        <el-radio v-model="type" label="2">模糊搜索</el-radio>
      </div>
      <!-- 搜索条件 -->
      <div class="search_if">搜索条件</div>
    </div>
    <div class="banner" style="height:calc(100% - 250px);">
      <div class="content">
        <!-- 左侧导航栏 -->
        <el-aside width="200px">
          <div class="banner-left">
            <!-- 每一个大分类 -->
            <div class="headLine" v-for="(item,index) in list" :key="index">
              <div @click="close(index)" class="box">
                <i class="el-icon-circle-plus" v-show="!item.isOff"></i>
                <i class="el-icon-remove" v-show="item.isOff"></i>
                <span>{{item.name}}</span>
              </div>

              <ul v-show="item.isOff" v-for="(item1,index) in item.children" :key="index">
                <li
                  :class="item1.id == cateIndex?'active':''"
                  @click="toggleCate(item1.id)"
                >{{item1.name}}</li>
              </ul>
            </div>
          </div>
        </el-aside>

        <!-- 右侧表格 -->
        <el-main>
          <div class="banner-right">
            <el-card
              class="box-card"
              style="min-height:calc(100%-250px)"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.6)"
            >
              <div class="head-box">
                <!-- 头部操作栏 -->
                <div class="toolTip">
                <!-- 重点 -->
                  <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                  >全选</el-checkbox>
                  <!-- 重点 -->
                  <ul>
                    <li>
                      显示等级
                      <i class="el-icon-arrow-down"></i>
                    </li>
                    <li>
                      分组浏览
                      <i class="el-icon-arrow-down"></i>
                    </li>
                    <li>相关度</li>
                    <li>
                      效力级别
                      <i class="el-icon-bottom"></i>
                    </li>
                    <li @click="sort">
                      发布日期
                      <i class="el-icon-bottom" v-show="isSort"></i>
                      <i class="el-icon-top" v-show="!isSort"></i>
                    </li>
                  </ul>
                </div>
                <!-- 分类蓝 -->
                <div class="title-box">
                  <span class="title" style="margin-right:20px">{{searchVal}}</span>
                  <span class="title" style="margin-right:20px">共{{recordsList.total}}篇</span>
                  <span class="more">查看更多</span>
                </div>
              </div>
              <!-- 内容区域 -->
              <div class="right_content">
                <div class="bookList" v-for="(item,index) in recordsList.records" :key="index">
                  <div>
                  <!-- 重点 -->
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                      <el-checkbox :label="item.id"></el-checkbox>
                    </el-checkbox-group>
                    <!-- 重点 -->
                  </div>
                  <div style="display:inline-block" class="book_right">
                    <div class="bHead">
                      <div class="title" @click="goBook(item.url)">{{item.title}}</div>
                      <span>[{{item.createTime | dateformat('YYYY-MM-DD')}}]</span>
                    </div>
                    <div class="bContent">{{item.content}}</div>
                    <!-- 分类 -->
                    <div class="class">
                      <div class="class_item">太空战略</div>
                      <div class="class_item">太空战略</div>
                      <div class="class_item">太空战略</div>
                      <div class="class_item">太空战略</div>
                    </div>
                    <div class="bBottom">
                      <div class="left">
                        <span>等级：</span>
                        <img src="~@/assets/images/u60.png" alt />
                        <img src="~@/assets/images/u60.png" alt />
                        <img src="~@/assets/images/u60.png" alt />
                        <img src="~@/assets/images/u60.png" alt />
                        <img src="~@/assets/images/u60.png" alt />
                      </div>
                      <div class="right">
                        <ul>
                          <li>引用</li>
                          <li>收藏</li>
                          <li>下载</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="fullPage">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 50]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordsList.total"
                ></el-pagination>
              </div>
            </el-card>
          </div>
        </el-main>
      </div>
    </div>
    <Footers />
  </div>
</template>

<script>
import { weChatList, weChatListIn } from "../../api/apis";
import Headers from "../../common/header";
import Footers from "../../common/footer";
export default {
  components: {
    Headers,
    Footers,
  },
  data() {
    return {
      // loading效果
      loading: false,
      // 是否全选  ========================ss===================================================
      checkAll: false,
      // 下拉框的展示？
      isOff: false,
      radio: "1",
      type: "1",
      // 每页的条数
      limit: 10,
      // 输入框的value值
      searchVal: "",
      // 第一次查询保存的值，判断用户是直接搜索还是在结果中搜索
      firstVal: "",
      // 在结果中搜索
      resultVal: "",
      // 排序
      isSort: true,
      // 当前的页码
      currentPage: 1,
      // 内容区域
      recordsList: {},
      // 下拉框是否显示
      isType: false,
      // 左侧列表选中的id
      cateIndex: 1,
      // 分类下拉框的id
      typeIndex: 1,
      isIndeterminate: false,
      // 当前所有数据的唯一标识集合
      checkedCities: [],
      multipleSelection: [],
      // 当前选中的数据的集合
      checkedGameId: [],
      // 分类列表
      typeList: [
        {
          type: 1,
          name: "主题",
        },
        {
          type: 2,
          name: "篇关摘",
        },
        {
          type: 3,
          name: "关键词",
        },
        {
          type: 4,
          name: "篇名",
        },
        {
          type: 5,
          name: "全文",
        },
        {
          type: 6,
          name: "作者",
        },
        {
          type: 7,
          name: "第一作者",
        },
        {
          type: 8,
          name: "作者单位",
        },
      ],
      // 左侧尅表数据
      list: [
        {
          name: "国别",
          isOff: true,
          children: [
            {
              name: "中国",
              id: 1,
            },
            {
              name: "美国",
              id: 2,
            },
          ],
        },
        {
          name: "国别",
          isOff: true,
          children: [
            {
              name: "中国",
              id: 3,
            },
            {
              name: "美国",
              id: 4,
            },
          ],
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // 获取query的search 值
    this.getParams();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // 根据search值获取文章列表
    this.getDetail();
  },
  watch: {
    $route: "getParams",
  },
  methods: {
    // 全选和取消全选
    handleCheckAllChange(val) {
      console.log(val);
      console.log(this.checkedGameId);
      this.checkedCities = val ? this.checkedGameId : [];
      console.log(this.checkedCities);
      this.isIndeterminate = false;
    },
    // 单击多选框
    handleCheckedCitiesChange(value) {
      console.log(value);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkedGameId.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.checkedGameId.length;
    },

    // 搜索 == 第一次搜索
    search() {
      if (this.searchVal.trim() == "") {
        return this.$message.error("内容不能为空");
      }
      var val = this.searchVal;
      this.firstVal = val;
      alert(val);
      if (this.isSort) {
        this.getDetail();
      } else {
        this.getDetailIn();
      }
    },
    // 在结果中搜索 
    resultSearch() {
      this.resultVal = this.searchVal;
      alert("第一次搜索：" + this.firstVal + "第二次搜索：" + this.resultVal);
      this.loading = true;
      weChatList({
        pageNo: this.currentPage,
        pageSize: this.limit,
        title1: this.firstVal,
        title2: this.resultVal,
      }).then((res) => {
        this.loading = false;
        var { data } = res;
        var result = data.result;
        this.recordsList = {
          current: result.currentPage,
          pages: result.totalPage,
          records: result.dataList,
          size: result.pageSize,
          total: result.totals,
        };
        this.checkedGameId = [];
        for (let i = 0; i < this.recordsList.records.length; i++) {
          this.checkedGameId.push(this.recordsList.records[i].id);
          this.multipleSelection = this.checkedGameId;
        }
      });
    },
    getParams() {
      // 取到路由带过来的参数
      const routerParams = this.$route.query.search;
      // 将数据放在当前组件的数据内
      this.searchVal = routerParams;
      this.firstVal = routerParams;
    },
    // 排序
    sort() {
      this.isSort = !this.isSort;
      if (this.isSort) {
        this.getDetail();
      } else {
        this.getDetailIn();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.limit = val;
      this.getDetail();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getDetail();
    },
    // 主题下拉框展示
    toggleTypeShow() {
      this.isType = !this.isType;
    },
    // 主题项的切换
    toggleType(index) {
      this.typeIndex = index;
      this.isType = false;
    },
    // 左侧分类点击事件
    toggleCate(index) {
      this.cateIndex = index;
    },
    // 高级搜索
    goSenior() {
      this.$router.push({
        path: "/senior",
      });
    },
    close(index) {
      this.list[index].isOff = !this.list[index].isOff;
    },
    // 获取文章 == 正序
    getDetail() {
      this.loading = true;
      weChatList({
        pageNo: this.currentPage,
        pageSize: this.limit,
        title: this.searchVal,
      }).then((res) => {
        this.loading = false;
        var { data } = res;
        var result = data.result;
        this.recordsList = result;
        this.checkedGameId = [];
        for (let i = 0; i < this.recordsList.records.length; i++) {
          this.checkedGameId.push(this.recordsList.records[i].id);
          this.multipleSelection = this.checkedGameId;
        }
      });
    },
    // 获取文章 == 倒序
    getDetailIn() {
      this.loading = true;
      weChatListIn({
        pageNo: this.currentPage,
        pageSize: this.limit,
        title: this.searchVal,
      }).then((res) => {
        this.loading = false;
        var { data } = res;
        var result = data.result;
        this.recordsList = result;
        this.checkedGameId = [];
        for (let i = 0; i < this.recordsList.records.length; i++) {
          this.checkedGameId.push(this.recordsList.records[i].id);
          this.multipleSelection = this.checkedGameId;
        }
      });
    },
    // 根据URL打开新窗口或者跳转到对应的文章页面
    goBook(url) {
      if (url) {
        window.open(url, "_blank");
      } else {
        this.$router.push("hello");
      }
    },
  },
};
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.sort-default {
  cursor: pointer;
}
.el-card__body {
  min-height: calc(100% - 250px) !important;
}
/* @import url(); 引入css类 */
/* 头部开始 */
header {
  height: 60px;
  background-color: #666;
  width: 100%;
}
.box-card {
  width: 100%;
  overflow-y: scroll;
}
header ul {
  display: inline-block;
}
header li {
  display: inline-block;
  height: 60px;
  line-height: 60px;
  margin-right: 20px;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: #ffffff;
}
header .right {
  float: right;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
header .right img {
  display: inline-block;
  line-height: 60px;
  height: 30px;
  width: 30px;
  background-color: red;
  border-radius: 50%;
  vertical-align: middle;
}
/* 头部结束 */
/* 搜索开始 */
.search {
  width: 100%;
  height: 50px;
  margin-top: 20px;
}
.input-box {
  float: left;
  height: 40px;
  margin-bottom: 24px;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #000;
}
.btns {
  float: left;
  margin-left: 20px;
  display: inline-block;
}
.sort {
  display: inline-block;
  position: relative;
  z-index: 1;
  float: left;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
  color: #072958;
}

.sort::before {
  position: absolute;
  content: "";
  clear: both;
  width: 1px;
  height: 25px;
  top: 8px;
  right: 0;
  background-color: #ccc;
}
.sort-list {
  background-color: #fff;
}
.sort-list li {
  color: #666;
  cursor: pointer;
  font-size: 14px;
}
.sort-list li.active {
  color: #fff;
  background-color: #6698fd;
}
.search-input {
  outline: none;
  float: left;
  width: 227px;
  height: 20px;
  padding: 10px 0 10px 20px;
  font-size: 14px;
  color: rgb(125, 125, 125);
  line-height: 20px;
  border: none;
  background-color: #fff;
  margin-right: 20px;
}
.search button {
  float: left;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  padding: 0 25px;
  border: none;
  background-color: #f2f2f2;
  border: 1px solid rgba(121, 121, 121, 1);
  margin-right: 20px;
  outline: none;
}
/* 搜索结束 */
.radio {
  height: 50px;
  line-height: 50px;
  text-align: left;
}
.search_if {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  margin-bottom: 20px;
}
div {
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.el-main {
  padding: 0 !important;
  overflow: hidden;
  margin-left: 40px;
}
.html {
  background-color: #f2f2f2;
  width: 100%;
  height: 100%;
}
.banner {
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}
.content {
  display: flex;
  height: 100%;
}
.banner-left {
  width: 200px;
  background: #fff;
}
.banner-right {
  flex: 1;
  background: #fff;
  height: 100%;
}
/deep/.el-card__body {
  padding: 20px;
  position: relative;
}
.head-box {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 99;
}
.box-card {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/deep/.el-card__body {
  height: inherit;
  box-sizing: border-box;
  overflow: hidden;
}
.right_content {
  box-sizing: border-box;
  padding: 0 0 80px 0;
  margin-top: 70px;
  height: inherit;
  overflow: scroll;
}
.headLine {
  cursor: pointer;
  padding: 5px;
}
.headLine .box {
  padding: 5px 0;
}
.headLine i {
  font-size: 17px;
  vertical-align: middle;
}
.headLine span {
  margin-left: 5px;
  font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
}

.headLine li {
  cursor: pointer;
  padding-left: 20px;
  height: 30px;
  line-height: 30px;
  font-family: "Arial Normal", "Arial", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}
.headLine li.active {
  color: #25b2ff;
}
.box-card {
  width: 100%;
}
.toolTip ul {
  display: inline-block;
  margin-left: 20px;
}
.toolTip li {
  cursor: pointer;
  display: inline-block;
  margin-right: 20px;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}
.title-box {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #333;
}
.title-box .title {
  font-weight: 900;
}
.title-box .more {
  float: right;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-weight: normal;
  color: #333;
}
.bookList {
  display: flex;
  padding: 20px 0;
}
.book_right {
  padding: 0 20px;
  border-bottom: 1px dashed #bcbcbc;
}
.bHead span {
  float: right;
  font-size: 12px;
  font-weight: normal;
}
.bHead .title {
  display: inline-block;
  cursor: pointer;
}
.bContent {
  color: #333;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 17px;
  margin-bottom: 10px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.class_item {
  display: inline-block;
  color: #999;
  font-weight: normal;
  font-size: 12px;
  background: #e6e6e6;
  border-radius: 10px;
  padding: 5px 5px;
  margin-right: 5px;
}
.bBottom {
  padding: 5px 0;
  height: 20px;
}
.bBottom .left {
  float: left;
}
.bBottom .left span {
  font-weight: normal;
  font-size: 12px;
}
.bBottom .left img {
  width: 10px;
  height: 10px;
  margin-right: 3px;
}
.bBottom .right {
  float: right;
}
.bBottom .right li {
  display: inline-block;
  margin-right: 10px;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
.right_content::-webkit-scrollbar {
  width: 8px;
  background-color: #f5f7f8;
}
.right_content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #cdcdcd;
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
}
.fullPage {
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  text-align: right;
  background-color: #fff;
}
/deep/.el-checkbox__label {
  display: none;
}
</style>
ʟᴇʟᴇ
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+element-UI实现列表排序（sortable、custom）
coinisi_li的博客
07-11 7336
只能实现当前页数据的排序，无法实现整张表全部数据的排序，所以需要采取自定义的排序方式重新触发接口，获取排序好的全部列表。属性：当你需要自定义排序逻辑，例如根据特定字段进行复杂的排序，或者需要对非字符串和数字类型的数据进行排序时，可以使用。当用户点击表头的排序按钮时，表格会自动按照该列的值进行升序或降序排序。属性：当你的表格数据是简单的字符串或数字类型，并且你只需要对列进行普通的升序或降序排序时，可以使用。事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。
ElementPlus 之 el-select 多选实现全选功能
都随它大小便吧
05-05 2695
经常会遇到这种多选下拉框支持全选的需求，在此简单记录一下在 ElementPlus 框架下，如何使得多选的 el-select 控件支持实现全选功能。
文章列表页 vue2 for element UI
weixin_69239757的博客
11-16 260
文章列表页 vue2 for element UI
wordpress page显示未找到页面_如何给wordpress网站的文章列表，添加分页效果？可以通过2种方式...
weixin_39595310的博客
11-21 331
在上一章节中，我们为wordpress网站的首页添加了全站文章列表。一个wordpress网站不可能只有几篇文章，可能会有成千上万的文章，作为一个wordpress博客主题模板，一般情况下，不可能让所有的文章在一个页面一下子全部显示出来，如果真这样，网页的负载会非常大。正确的处理方式，是先显示最前面的十几篇或二十几篇文章，然后，“点击一个分页按钮”或者“鼠标向下滚动触发一个事件”后，再显示后面的十...
vue 列表实现选中，全选功能
Hi~豆豆麻麻
04-19 4141
话不多说，直接上代码，挺简单的，但是还是记录下来吧 <template> <div class="container"> <div class="cartList"> <div class="cartItem" v-for="item in list"> <div class="selctBtn" ...
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip
03-09
在这个特定的案例中，我们关注的是如何使用Element UI来实现一个带有复选框（checkbox）的下拉框（select），并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先，我们需要在项目...
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
vue多级复杂列表展开/折叠及全选/分组全选实现
10-17
主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+element+input+提取选中文字
05-12
textarea中有大量数据，获得鼠标选中的部分数据
vue 实现搜索的结果页面支持全选与取消全选功能
11-29
演示地址，打开、搜索、随便点 ...npm i element-ui -S // main.js import ElementUI from 'element-ui' ... 全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表 功能列表 1、搜索时展示相应的数据
vue列表的全选和反选实现逻辑
weixin_44207118的博客
05-10 799
有两种实现方法逻辑： 第一种使用computed属性，第二种使用watch方法： 总结主要思路就是列表和全选属性相关联利用监听属性和数组every的方法，计算属性和数组filter方法，需要注意computed终get和set方法的使用 <template> <div class="container_big"> <inputSearch v-model="orderNumber" @searChList='searChList' class="headSearch
Vue实现全选、反选、全不选功能
功能总结
03-03 5300
Vue实现全选、反选、全不选功能
Element UI实现单选多选，批量删除
牛文文的Home
08-09 7705
先再el-table标签内添加点击复选框的事件和点击行的事件 <el-table v-loading="listLoading" :data="datalist" @selection-change="handleSelectionChange" //多选，当选择项发生变化时会触发该事件 @row-click="handleRowClick" //点击每行时触发事件 ref="handSelectTest_multip
elementUI表格所有页全选,单个选择取消选择
qq_44096635的博客
01-28 1357
elementUI表格所有页全选,单个选择取消选择
使用element UI中的el-table实现批量选中删除
qq_45959912的博客
01-13 6063
el-table实现批量选中删除 最近的vue项目中有个业务，表格数据用的是el-table展示，需要批量删除选中的数据，直接上代码吧 <el-table :data="UserList" ref="multipleTable" stripe border @sel
vue element-ui el-table多选框多选删除实现
m0_49714202的博客
12-04 783
<div class="tbb"> <toolbar-button @click="add" :label="$t('common.add')" icon="el-icon-plus" size="small"></toolbar-button> <toolbar-button @click="del" :label="$t('common.del')" icon="el-icon-plus" size="small"></toolbar-button&
element el-table表格的多选删除
08-08 1904
element表格多选后删除。
vue+element的表格中批量删除功能
热门推荐
莫不静好
10-29 1万+
记录一下实现“批量删除”需要注意的问题 页面效果 表格代码 data中代码如下 data() { return { tableData: [], tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值 ids:[],//批量删除id }; }, 在method中添加handle...
vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
草巾冒小子的博客
07-23 1571
elementUI表格组件，response.data.newsLists列表如何循环出来？如何点击传参numId，并进入对应的内容页？ 这就是本篇博客的阐述意图。 效果图： 一、首先，服务器请求回来的数据类型：（代码如下） 二、其次，示例elementUI组件的应用代码：（代码如下） 三、vue的script关键代码：（代码如下） 以上就是关于“ vue路由+ elementU...
使用element UI级联菜单实现全选取消全选功能 vue
最新发布
06-07
要实现element UI级联菜单的全选/取消全选功能，可以通过以下步骤实现： 1. 在级联菜单的第一个级别中添加一个全选按钮，用于全选/取消全选所有选项。 2. 在每个级别的选项中添加一个复选框，用于选择/取消选择...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值