国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue+Element-ui實(shí)現(xiàn)表格嵌套表格(表頭不同)

這篇具有很好參考價(jià)值的文章主要介紹了Vue+Element-ui實(shí)現(xiàn)表格嵌套表格(表頭不同)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

實(shí)現(xiàn)效果

vue單元格動(dòng)態(tài)嵌套表格,# Vue,Element-ui,vue.js,element-ui

模板

<!-- 查詢條件 -->
<el-form label-width="60px" class="query-form">
  <el-form-item label="狀態(tài):">
    <el-select v-model="queryBody.status" clearable placeholder="請(qǐng)選擇狀態(tài)">
      <el-option
        v-for="item in status"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="大標(biāo)題:" class="query-title">
    <el-input
      v-model="queryBody.fuzzy"
      placeholder="請(qǐng)輸入大標(biāo)題關(guān)鍵字"
      clearable
    />
  </el-form-item>
  <el-button type="primary" class="query-btn" @click="queryIntegrateList">
    查詢
  </el-button>
</el-form>
<!-- 列表表格區(qū)域 -->
<el-table ref="refTable" :data="integrateList" border stripe
          style="width: 100%" @expand-change="expandChange"
>
  <el-table-column type="expand">
    <template slot-scope="scope">
      <el-form label-position="left" inline class="demo-table-expand">
        <el-table :data="scope.row.child" border stripe style="width: 100%">
          <el-table-column type="index" />
          <el-table-column prop="title" label="小標(biāo)題" />
          <el-table-column prop="author" label="作者" />
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                circle
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="xxx(scope.row.id)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column prop="title" label="大標(biāo)題" />
  <el-table-column prop="child.length" label="包含數(shù)量" />
  <el-table-column label="狀態(tài)" prop="status">
    <template slot-scope="scope">
      <el-tag v-if="scope.row.status== 0" type="warning">
        審核中
      </el-tag>
      <el-tag v-else-if="scope.row.status== 1" type="success">
        審核通過
      </el-tag>
      <el-tag v-else type="danger">
        審核駁回
      </el-tag>
    </template>
  </el-table-column>
</el-table>
<!-- 分頁 -->
<el-pagination
  :current-page="queryParams.pages"
  :page-sizes="[5,10, 15, 20]"
  :page-size="queryParams.size"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>

js

data () {
  return {
    // 大欄目列表數(shù)據(jù)
    integrateList: [],
    total: 0,

    // 查詢參數(shù)對(duì)象1(放在請(qǐng)求的params里,以?形式拼接)
    queryParams: {
      pages: 1,
      size: 5
    },

    // 查詢參數(shù)對(duì)象
    queryBody: {
      fuzzy: '',
      status: ''
    },
    
    // 大欄目狀態(tài)下拉列表
    status: [
      {
        value: '',
        label: '全部'
      },
      {
        value: '0',
        label: '審核中'
      },
      {
        value: '1',
        label: '審核通過'
      },
      {
        value: '2',
        label: '審核駁回'
      }
    ]
  }
},
mounted () {
  this.InitIntegrateList()
},
methods: {
  InitIntegrateList () {
    //調(diào)用接口,初始化大欄目列表
  },
  
  //點(diǎn)擊查詢按鈕觸發(fā)
  queryIntegrateList () {
    this.queryParams.pages = 1
    this.InitIntegrateList()
  },
  
  //頁面數(shù)據(jù)條數(shù)發(fā)生變化觸發(fā)
  handleSizeChange (newPageSize) {
    this.queryParams.size = newPageSize
    this.InitIntegrateList()
  },
  
  //頁碼發(fā)生變化觸發(fā)
  handleCurrentChange (newPageNum) {
    this.queryParams.pages = newPageNum
    this.InitIntegrateList()
  },
  
  //根據(jù)id查詢信息
  xxx(id) {
    //可能針對(duì)id調(diào)接口,查詢展示信息
  },

  // 只允許出現(xiàn)一個(gè)展開的大欄目
  expandChange (row, expandedRows) {
    let that = this
    if (expandedRows.length > 1) {
      that.expands = []
      if (row) {
        that.expands.push(row)
      }
      this.$refs.refTable.toggleRowExpansion(expandedRows[0])
    } else {
      that.expands = []
    }
  }

}

樣式

.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.query-form {
  display: flex;
  .query-title {
    margin: 0 95px 0;
  }
}

其它說明

data中integrateList根據(jù)后端返回的json數(shù)據(jù)確定,其格式為:文章來源地址http://www.zghlxwxcb.cn/news/detail-634477.html

[
    {
        "id": "1",
        "title": "yyy",
        "status": 1,
        "child": [
            {
                "id": "1",
                "title": "yyyy",
                "author": "admin",
                ...
            }
        ]
    },
    {
        "id": "2",
        "title": "2-777",
        "status": 0,
        "child": [
            {
                "id": "1",
                "title": "ttt",
                "author": "t1",
                 ...
            },
            {
                "id": "2",
                "title": "qqq",
                "author": "q1",
                 ...
            }
        ]
    }
]

到了這里,關(guān)于Vue+Element-ui實(shí)現(xiàn)表格嵌套表格(表頭不同)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • element-ui table-自定義表格某列的表頭樣式或者功能

    element-ui table-自定義表格某列的表頭樣式或者功能

    自帶表格 自定義表格某列的表頭樣式或者功能

    2024年02月03日
    瀏覽(24)
  • element-ui 表格(table)合并表頭下面合并列且可以收縮展開

    百度了一大堆,發(fā)現(xiàn)了首行不能合并,想到了用dom做,找到了下面這個(gè)鏈接 1、表頭合并 —— 給table添加屬性:header-cell-style=\\\"headerStyle\\\",里面給首行設(shè)置跨行 element-ui表頭合并 - ^Mao^ - 博客園 2、表內(nèi)合并 ——?給table添加屬性:span-method=\\\"arraySpanMethod\\\",里面設(shè)置合并 Element - The wor

    2024年02月16日
    瀏覽(96)
  • element-ui table表格滾動(dòng)條拉到最右側(cè) 表頭與內(nèi)容不能對(duì)齊

    1.問題概述 當(dāng)表格數(shù)據(jù)太多,會(huì)出現(xiàn)縱向滾動(dòng)條和橫向滾動(dòng)條,把橫向滾動(dòng)條拉到最右側(cè)時(shí),會(huì)出現(xiàn)表頭與內(nèi)容不能對(duì)齊的現(xiàn)象。 2.解決方法 1.當(dāng)頁面數(shù)據(jù)加載完畢后,在后面加上 2.別忘了給表格加上ref屬性

    2024年02月10日
    瀏覽(28)
  • (vue)element-ui 表格實(shí)現(xiàn)勾選單選

    (vue)element-ui 表格實(shí)現(xiàn)勾選單選

    效果: 重選后: 解決參考:https://blog.csdn.net/m0_58373910/article/details/125912828

    2024年02月12日
    瀏覽(26)
  • element-ui 表格el-table高度不是一個(gè)固定值時(shí)固定表頭

    element-ui 表格el-table高度不是一個(gè)固定值時(shí)固定表頭

    elementui中為表格組件提供了height屬性實(shí)現(xiàn)固定表頭 height可以為數(shù)字或者字符串,當(dāng)為一個(gè)數(shù)字時(shí)表示固定的高度,也可以為百分比等字符串。 當(dāng)height不是一個(gè)固定值時(shí),如期望表格可以填充完頁面剩余空間,并且固定表頭時(shí),可以通過給height屬性賦值字符串形式實(shí)現(xiàn)。以頁

    2024年01月25日
    瀏覽(109)
  • Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格(最簡(jiǎn)單示例)

    Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格(最簡(jiǎn)單示例)

    以下是一個(gè)簡(jiǎn)單的示例代碼,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格: 上面的代碼通過type=\\\"expand\\\"設(shè)置了一個(gè)展開按鈕,點(diǎn)擊該按鈕會(huì)顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容。 在上面的示例中,我們定義了一個(gè)包含姓名和年齡的主表格,以及一個(gè)展開列用于顯示與每行

    2024年02月02日
    瀏覽(41)
  • vue搭配element-ui前端實(shí)現(xiàn)表格分頁

    如果不從后臺(tái)請(qǐng)求數(shù)據(jù),那么就需要在前端手動(dòng)管理數(shù)據(jù)。可以使用以下步驟實(shí)現(xiàn)該功能: 在 Vue 組件的 data 中定義一個(gè)數(shù)組來存放所有數(shù)據(jù)(不分頁)。 在 mounted 鉤子函數(shù)中,手動(dòng)獲取數(shù)據(jù)并存放到上一步定義的數(shù)組中。 在模板中使用 element-ui 的表格組件來展示數(shù)據(jù),同

    2024年02月11日
    瀏覽(32)
  • vue2&Element-ui實(shí)現(xiàn)表格單元格合并

    vue2&Element-ui實(shí)現(xiàn)表格單元格合并

    由于項(xiàng)目需要實(shí)現(xiàn)單元格合并目前只是單頁沒有做分頁處理先上效果圖 看下數(shù)據(jù)結(jié)構(gòu) Element table提供的api arraySpanMethod columnIndex=0表示從第一列開始 rowIndex表示需要操作的行數(shù) 同濟(jì)醫(yī)院加上合計(jì)有12行從0開始=11 判斷條件是rowIndex余12===0 我們打印一下 或者改成 表示從0開始到1

    2024年02月12日
    瀏覽(37)
  • vue+element-UI實(shí)現(xiàn)跟隨滾動(dòng)條加載表格數(shù)據(jù)

    el-table當(dāng)數(shù)據(jù)量大的時(shí)候,實(shí)現(xiàn)滾動(dòng)到底部后加載數(shù)據(jù),直接上js代碼,有其他需求請(qǐng)各自更改 ?第一步、在data中定義兩個(gè)數(shù)組 第二步、在數(shù)據(jù)發(fā)生改變的方法中先循環(huán)存放一部分?jǐn)?shù)據(jù)用于頁面顯示 第三步、在mounted監(jiān)聽滾動(dòng)事件

    2024年02月16日
    瀏覽(30)
  • vue+Element UI 實(shí)現(xiàn)動(dòng)態(tài)表單(點(diǎn)擊按鈕增刪表格及嵌套輸入框的增刪)(1)

    vue+Element UI 實(shí)現(xiàn)動(dòng)態(tài)表單(點(diǎn)擊按鈕增刪表格及嵌套輸入框的增刪)(1)

    el-button size=“small” @click=“addTable”新增 el-button size=“small” @click=“delTable”刪除 el-table ref=“table” :data=“tableDataBind.taAssessltems” tooltip-effect=“dark” border @selection-change=“selectRow” 規(guī)格: 重量: 數(shù)量: 加工費(fèi): el-button size=“mini” type=“primary” icon=“el-icon-circle-plus-ou

    2024年04月13日
    瀏覽(36)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包