欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)表格批量審核功能實例代碼

 更新時間:2019年05月28日 15:47:33   作者:face light~  
這篇文章主要為大家詳細介紹了Vue實現(xiàn)表格批量審核功能實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue實現(xiàn)表格批量審核功能的具體代碼,供大家參考,具體內(nèi)容如下

1 前端部分

效果如下圖所示:


1.1 html部分

 <el-form-item>
   <el-button type="success" icon="el-icon-search" @click="auditServer()" :disabled="this.sels.length === 0">批量審核</el-button>
    <el-button @click="toggleSelection()">取消選擇</el-button>
    </el-form-item>
    </br>
    <el-table border :fit="true" ref="multipleTable" height="520" :data="listData" :highlight-current-row="true" size="small" @selection-change="selsChange" @row-click="handleChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="applcd" label="微服務編碼" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
        <el-table-column prop="servcd" label="服務編碼" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
 </el-table>

代碼說明:

1)為table添加屬性

@selection-change="selsChange" @row-click="handleChange"

2)添加一列 指定type為selection,表示該表格可選擇

<el-table-column type="selection" width="55"></el-table-column>

3)當沒有選擇服務時,按鈕不可選;

:disabled="this.sels.length === 0"

1.2 js部分

export default {
 data () {
  return {

   sels:[],


 methods: {


  selsChange(sels) {
    this.sels = sels
  },

  handleChange(row, event, column) {
    this.$refs.multipleTable.toggleRowSelection(row)
  },
  auditServer () {
   var servids = this.sels.map(item => item.servid).join(",")
   var params = {
    serverIds:servids
   }
     debugger
     auditServer(params).then(
     function (res) {
     debugger
      if(res.code === 200){
      this.$message({
           message: res.data,
           type: 'success'
          })
      this.dialogFormVisible = false
      }else{
      this.$message({
         message: '錯誤信息:'+res.message,
         type: 'error'
        });
      }
        this.loadData()
     }.bind(this)
    )
  },

  toggleSelection(){
  this.$refs.multipleTable.clearSelection();
  }
 }
}

2 后端部分

2.1 mapper.xml

批量修改的Mybatis實現(xiàn)方式,注意sql語句的書寫

<!--審核服務信息-->
  <update id="auditServers" parameterType="java.util.List">
    update sdcp_serv
    SET ISAUDITED ='1'
    where servid in
    <foreach collection="list" index="index" item="item"
         separator="," open="(" close=")">
      #{item,jdbcType=VARCHAR}
    </foreach>
</update>

2.2 mapper.java(對應的接口)

int auditServers(List<String> servids);

2.3 controller

/**  
 * @Description: 批量審核服務信息 
 * @param @param map
 * @param @return
 * @param @throws Exception  參數(shù) 
 * @return Object  返回類型  
 */ 
    @RequestMapping(value = "/auditServers", method = RequestMethod.POST)
    public Object auditServers(@RequestBody Map<String, Object> map) throws Exception {
      if (map.get("serverIds")!=null){
        String serverIds = (String) map.get("serverIds");
        List<String> ids = Arrays.asList(serverIds.split(","));
        apiServerMapper.auditServers(ids);
      }
      return ResponseData.success("服務信息修改成功");
 }

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • el-menu彈出菜單樣式不生效的問題及解決方法

    el-menu彈出菜單樣式不生效的問題及解決方法

    這篇文章主要介紹了el-menu彈出菜單樣式不生效的問題及解決方法,修改彈出框元素不在 el-menu 樣式中,我們需要在 el-menu–popup 中修改樣式,具體操作代碼跟隨小編一起看看吧
    2024-07-07
  • element?tab標簽管理路由頁面的項目實踐

    element?tab標簽管理路由頁面的項目實踐

    本文主要介紹了element?tab標簽管理路由頁面的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-08-08
  • vue3實現(xiàn)表格編輯和刪除功能的示例代碼

    vue3實現(xiàn)表格編輯和刪除功能的示例代碼

    這篇文章主要為大家詳細介紹了vue3實現(xiàn)表格編輯和刪除功能的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-01-01
  • 詳解vue中移動端自適應方案

    詳解vue中移動端自適應方案

    這篇文章主要介紹了vue移動端自適應,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • vue.js中$set與數(shù)組更新方法

    vue.js中$set與數(shù)組更新方法

    下面小編就為大家分享一篇vue.js中$set與數(shù)組更新方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue.js中Vue-router 2.0基礎實踐教程

    vue.js中Vue-router 2.0基礎實踐教程

    這篇文章主要給大家介紹了關于vue.js中Vue-router 2.0基礎實踐的相關資料,其中包括vue-router 2.0的基礎用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關知識,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-05-05
  • vite+element-plus項目基礎搭建的全過程

    vite+element-plus項目基礎搭建的全過程

    最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關于vite+element-plus項目基礎搭建的全過程,需要的朋友可以參考下
    2022-07-07
  • 使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法

    使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法

    這篇文章主要介紹了使用vue-cli+webpack搭建vue開發(fā)環(huán)境的方法,需要的朋友可以參考下
    2017-12-12
  • Vue中對數(shù)組和對象進行遍歷和修改方式

    Vue中對數(shù)組和對象進行遍歷和修改方式

    這篇文章主要介紹了Vue中對數(shù)組和對象進行遍歷和修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 詳解Vue使用命令行搭建單頁面應用

    詳解Vue使用命令行搭建單頁面應用

    本篇文章主要介紹了詳解Vue使用命令行搭建單頁面應用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05

最新評論