获取并控制elmentui列表中指定元素

最新推荐文章于 2024-10-04 00:46:18 发布
最新推荐文章于 2024-10-04 00:46:18 发布
阅读量100 收藏
点赞数 1
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74759856/article/details/142618250
版权

<!-- 使用scope.row表格当前行的数据对象 -->  这是核心。

<el-card style="margin-top: 1rem">
      <el-table :data="tableData">      
    <el-table-column label="开屏"  >  
      <template slot-scope="scope">  
        <!-- 使用scope.row表格当前行的数据对象 -->  
        <el-switch  
        v-model="scope.row.kaiping" 
        @change="rowKaiping(scope.row.id,scope.row.kaiping)" 
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column>

为了区分，红色的就是被控制的组件

以上图片完整代码展示



<template>
  <div class="page">
  
    <el-card style="margin-top: 20px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="版本号">
          <el-input v-model="formInline.orderNumber" @keyup.enter.native="onSubmit" placeholder="请输入版本号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"   @click="onSubmit" >查询</el-button>
        </el-form-item>
      </el-form> 
    </el-card>

    <el-card style="margin-top: 1rem">
      <el-table :data="tableData">
        
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="版本号" prop="version"></el-table-column>   
        <el-table-column label="下载路径" prop="url"></el-table-column>
        <el-table-column label="更新内容" prop="text"></el-table-column>
        <el-table-column label="应用渠道" prop="channel"></el-table-column>

          <!-- 开屏列，包含开关 -->  
    <el-table-column label="开屏"  >  
      <template slot-scope="scope">  
        <!-- 使用scope.row表格当前行的数据对象 -->  
        <el-switch  
        v-model="scope.row.kaiping" 
        @change="rowKaiping(scope.row.id,scope.row.kaiping)" 
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 
    
            <!-- 全屏列，包含开关 -->  
            <el-table-column label="全屏"  >  
      <template slot-scope="scope">  
        <!-- 使用scope.row来访问当前行的数据 -->  
        <el-switch  
          v-model="scope.row.quanping" 
          @change="rowQuanping(scope.row.id,scope.row.quanping)"  
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 

          <!-- 信息流 -->  
            <el-table-column label="信息流"  >  
      <template slot-scope="scope">  
        <!-- 使用scope.row来访问当前行的数据 -->  
        <el-switch  
          v-model="scope.row.xinxiliu"  
          @change="rowXinxiliu(scope.row.id,scope.row.xinxiliu)"  
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 

 
       <!--    draw广告 -->  
       <el-table-column label="draw广告" >  
      <template slot-scope="scope">  
        <!-- 使用scope.row来访问当前行的数据 -->  
        <el-switch  
          v-model="scope.row.draw" 
          @change="rowDraw(scope.row.id,scope.row.draw)"   
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 

       <!--        激励视频 -->  
       <el-table-column label=" 激励视频" >  
      <template slot-scope="scope">  
        <!-- 使用scope.row来访问当前行的数据 -->  
        <el-switch  
          v-model="scope.row.jilishipin"  
          @change="rowjilishipin(scope.row.id,scope.row.jilishipin)" 
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 
    

           <!--        banner广告 -->  
           <el-table-column label=" banner广告"  >  
      <template slot-scope="scope">  
        <!-- 使用scope.row来访问当前行的数据 -->  
        <el-switch  
          v-model="scope.row.banner"  
          @change="rowBanner(scope.row.id,scope.row.banner)" 
          active-color="#13ce66"  
          inactive-color="#ff4949">  
        </el-switch>  
      </template>  
    </el-table-column> 

        
        
        <el-table-column label="是否强制更新" prop="state"></el-table-column>
        <el-table-column label="更新时间" prop="time"></el-table-column>
        
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <!-- <el-button type="text" size="small" @click="$router.push(`/news/category/appedit?id=${row.id}`)">编辑</el-button> -->
            <el-popconfirm title="确定删除吗？" @confirm="onDelete(row.id)">
              <el-button type="text" size="small" slot="reference" style="color: #f56c6c">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页代码 -->
  <el-pagination 
  style="text-align: center; margin-top: 10px;"
  class="pagination-right" 
  background layout="prev, pager, next"
  @current-change="handlePageChange"
  :total=totalPage>
</el-pagination>

    </el-card>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [], 


      created() {  
    this.getCategories(); // 组件创建时立即获取数据  
  },  

      currentPage: 1,
      totalPage: '',
     url:`http://localhost:9001/app-update/localUpdate`,
      
      formInline: {
        orderNumber: '',
        region: ''
      }
    };
  },

  // vue钩子 页面加载时执行

  mounted() {
                this.getCategories();

                if (!sessionStorage.getItem('state')) {
                        this.$router.push('/')
                }

                
        },

  methods: {
    // // 处理分页数据
    handlePageChange(newPage) {
      // newPage 是用户点击的页码
      this.currentPage = newPage;
      console.log(`当前页码: ${newPage}`);
      // 可以选择在这里调用getCategories()来立即获取新页码的数据
      if (!this.formInline.orderNumber.trim()) {
        this.getCategories();
        return;
      }

      this.onSubmit();
    },


    
// 控制开屏开关方法
    rowKaiping(id,kaiping){
      console.log(this.url)
      console.log("id"+id)
        console.log("当前值"+kaiping)
        // 数据改变
       let data={
        id,
        kaiping
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }      
        })
    },

    // 控制全屏开关方法
    rowQuanping(id,quanping){
      console.log("id"+id)
        console.log("当前值"+quanping)
        // 数据改变
       let data={
        id,
        quanping
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }        
        })
    },

        // 控制信息流开关方法
        rowXinxiliu(id,xinxiliu){
      console.log("id"+id)
        console.log("当前值"+xinxiliu)
        // 数据改变
       let data={
        id,
        xinxiliu
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }        
        })
    },

      // 控制draw开关方法
      rowDraw(id,draw){
      console.log("id"+id)
        console.log("当前值"+draw)
        // 数据改变
       let data={
        id,
        draw
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }        
        })
    },

 // 控制激励视频开关方法
 rowjilishipin(id,jilishipin){
      console.log("id"+id)
        console.log("当前值"+jilishipin)
        // 数据改变
       let data={
        id,
        jilishipin
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }        
        })
    },

  
    // 控制banner开关方法
    rowBanner(id,banner){
      console.log("id"+id)
        console.log("当前值"+banner)
        // 数据改变
       let data={
        id,
        banner
        }

        this.$http.post(this.url,data).then(resp=>{
          if (resp.data==true) {
        this.$message.success('修改成功');
      } else {
        this.$message.error('修改失败');
      }        
        })
    },


    getCategories() {
      let url = `http://127.0.0.1:9001/app-update/selectList?page=${this.currentPage}`;

      this.$http.get(url).then(res => {
        console.log(res);
        this.tableData= res.data.data;
    
        this.totalPage = res.data.count * 10;
        console.log(this.totalPage);
      });
    },

    async onDelete(id) {
      let url=`http://127.0.0.1:9001/app-update/localDelete?id=${id}`;
      this.$http.get(url).then(resp=>{
      if (resp.data==true) {
        this.$message.success('删除成功');
        this.getCategories();
      } else {
        this.$message.error('删除失败');
      }
      })
    },



    onSubmit() {
      if (!this.formInline.orderNumber.trim()) {
        // alert('请输入用户名！');
        this.handlePageChange(1)
        this.getCategories();
        return;
      }

      let url = `http://127.0.0.1:9001/app/likeSelect?version=${this.formInline.orderNumber}&page=${this.currentPage}&pageSize=10`;

      this.$http.get(url).then(res => {
        console.log(res.data);

        if (res.data.data.length == 0) {
           url = `http://127.0.0.1:9001/app/likeSelect?version=${this.formInline.orderNumber}&page=1&pageSize=10`;

          this.$http.get(url).then(result => {
            this.categories = result.data.data;
            console.log(this.categories);
            this.totalPage = result.data.count * 10;
            return;
          });
        }
        
        this.categories = res.data.data;
        this.totalPage = res.data.count * 10;
        
      });
    }
  }
};
</script>

<style>
.pagination-right {  
  /* 假设父元素有足够的宽度来容纳分页控件，并且你希望分页控件紧贴右侧 */  
  display: flex; /* 使用 Flexbox 布局 */  
  justify-content: flex-end; /* 使得子元素（分页控件）在主轴的末尾对齐，即右对齐 */  
  
  /* 如果需要，还可以添加一些额外的样式来确保分页控件的布局 */  
  width: 60%; /* 使得分页控件填满父元素的宽度（可选） */  
  box-sizing: border-box; /* 包含 padding 和 border 在 width 内（可选） */  
}  
</style>

狗嘚
关注
VUE+ELMENTUI大数据平台
11-08
在大数据平台中，ECharts可以将复杂的数据以直观、生动的方式呈现出来，帮助用户理解并分析数据。ECharts与Vue.js结合使用时，可以通过Vue的指令或计算属性来动态更新图表数据，实现交互式的数据探索。 在实际项目...
vue+elmentui+ueditor +KityFormula数学公式 编辑器.zip
09-22
根据描述，下载该压缩包后，需要在项目根目录下运行 `npm install` 命令来安装所有依赖，这会依据 `package.json` 文件中的依赖列表下载并安装相应的npm包。安装完成后，执行 `npm run dev` 来启动开发服务器，访问...
SpringBoot开发接口实现excel导入数据并存储在数据库中
04-27
相关博客：https://blog.csdn.net/m0_51197424/article/details/124454553 开发技术：SpringBoot MyBatis MySQL 实现内容：开发接口实现导入Excel数据后，将数据存储到数据库中
ElementUI如何将表格中指定行的数据导出excel文件-附件资源
03-02
ElementUI如何将表格中指定行的数据导出excel文件-附件资源
element-ui 离线中文文档api下载 版本2.4
09-19
6. **导航组件**：包括 Navigation Bar（导航栏）、Menu（菜单）、Breadcrumb（面包屑）、Pagination（分页）、Steps（步骤条）等，帮助用户在应用中导航。 7. **数据展示组件**：Table（表格）、Tag（标签）、...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 894
Vue 2 中使用 Vue I18n 插件实现中英文切换
vue3 实现文本内容超过N行折叠并显示“...展开”组件
Angel_Tears_的博客
09-28 1222
> 组件内文字样式取决与外侧定义 > 组件大小发生变化时,文本仍可以省略到指定行数 > 文本不超过时, 无展开,收起按钮 > 传入文本发生改变后, 组件展示新的文本
Vue 技术进阶 day2 数据监视的原理、其他内置指令、自定义指令、生命周期、组件化、VueComponent构造函数
2301_77358195的博客
09-30 929
自定义指令
Vue根实例、实例总结
最新发布
m0_54007573的博客
10-04 363
Vue根实例、实例总结
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 588
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Vue.js组件开发教程
q903249871的博客
09-29 1268
组件是 Vue.js 应用程序的基本构建块。它们是独立且可复用的代码块，可以包含模板、逻辑和样式。提高代码的可维护性实现代码复用使应用结构更加清晰子组件可以通过$emit方法向父组件发送事件。组件是构建 Vue.js 应用程序的基石。通过本教程，您应该对如何创建和使用组件有了基本的了解。继续探索 Vue.js 的组件系统，可以让您的应用更加模块化、可维护和强大。希望这份教程对您有所帮助，祝您在 Vue.js 的学习和开发中取得成功！
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1209
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1245
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
10-JetPack项目实战-实现App共享ViewModel
璐璐的专栏
09-29 610
JetPack项目实战-实现App共享ViewModel；MVVM框架；项目实战-实现App共享ViewModel；
【开源免费】基于SpringBoot+Vue.JS新闻推荐系统（JAVA毕业设计）
customer08的博客
09-28 1567
本站是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得新闻推荐系统管理工作系统化、规范化。
Vue-Lecture1-Notes
m0_74331272的博客
09-30 1598
Vue 的设计使得它既适合小型项目的使用，又能随着项目规模的扩大而扩展使用更多的功能。：一个用于检查代码质量的插件，它能够帮助你遵守编程规范，自动检测代码中的潜在错误，并提供修复建议。：Vue 的核心功能可以用于基本的页面渲染和数据绑定，开发者可以仅使用这些功能来构建简单的应用。对于 Vue 开发者来说，它能够自动格式化你的代码，使代码风格保持一致，从而提升代码的可读性。：可以把 DOM 看作是网页的“骨架”，它定义了网页的结构，JavaScript 和 Vue 可以用它来控制和修改网页内容。
毕业论文设计javaweb+VUE高校教师信息管理系统
计算机程序开发设计
09-29 1049
教师信息管理系统旨在为学校提供一个全面的解决方案，帮助学校更好地管理教师的各项信息，提高工作效率，同时也能为教师个人的职业发展提供支持。该系统主要包括以下几个模块：教师管理部门管理奖惩管理业绩管理培训管理报表查询通过上述介绍可以看出，一个完善的教师信息管理系统不仅能够极大地提升学校在教师信息管理方面的效率，还能促进教师个人职业成长和发展。未来，随着技术的进步，这样的系统还将不断优化升级，更好地服务于教育事业。
初学Vue
2302_80244686的博客
09-29 873
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
Vue3.0面试题汇总
qq_25741071的博客
09-29 1014
实现 DOM 的方式进行 WebGL 编程。
elmentui 模糊获取ref
05-29
在 Element UI 中，我们可以使用 `$refs` 来获取组件的引用，然后使用 `filter` 方法进行模糊查询。以下是一个简单的例子： ```html <template> <div> <el-input v-model="searchText" placeholder="输入关键字搜索" @input="search"></el-input> <el-table ref="table" :data="tableData" style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: '张三', age: 20, address: '北京市' }, { id: 2, name: '李四', age: 22, address: '上海市' }, { id: 3, name: '王五', age: 25, address: '广州市' }, { id: 4, name: '赵六', age: 28, address: '深圳市' }, ], searchText: '', }; }, methods: { search() { const keyword = this.searchText.trim(); if (keyword === '') { this.$refs.table.clearFilter(); } else { this.$refs.table.filter((value, key) => { return value.toString().toLowerCase().indexOf(keyword.toLowerCase()) !== -1; }); } }, }, }; </script> ``` 这段代码中，我们使用 `ref` 给 `<el-table>` 组件创建了一个引用，然后在 `search` 方法中通过 `$refs` 获取了这个引用。当用户输入关键字时，我们使用 `filter` 方法对表格数据进行模糊查询。如果关键字为空，则使用 `clearFilter` 方法清除过滤结果。如果关键字不为空，则使用 `filter` 方法对表格数据进行过滤，过滤条件为每个单元格的值是否包含关键字。最后，我们在模板中使用 `v-model` 绑定 `searchText` 的值，当用户输入关键字时，会自动触发 `search` 方法进行查询。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值