日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

使用element中el-table設置type=“expand“展開行隱藏小箭頭的方法(列表單選、點擊名稱展開行)

作者:migexiaoliang 更新時間: 2022-08-15 編程語言

項目場景:

項目中有時候需要使用element中el-table設置type="expand"展開行,但是需要隱藏小箭頭,點擊某個地方展開行,如下所示:

在這里插入圖片描述


實現方法:

使用 type="expand" 可以開啟展開行功能,使用 width="1" 可以隱藏展開行的小箭頭。

		<el-table-column
            type="expand"
            width="1">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="10"
                v-model="scope.row.policyDoc">
              </el-input>
            </template>
          </el-table-column>

但是發現沒有完全隱藏小箭頭,如下所示:

在這里插入圖片描述

解決方法是,修改為 width="5"便可。

在這里插入圖片描述


仍有點小瑕疵。請網友提供更好的解決辦法。


附加功能:列表單選、點擊名稱展開行:

<el-table
          :data="tableData"
          ref="tableObj"
          :stripe="true"
          @row-click = "showRow">
          <el-table-column
            type="expand"
            width="5">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="10"
                v-model="scope.row.policyDoc">
              </el-input>
            </template>
          </el-table-column>
          <!-- 單選 -->
          <el-table-column
            width="40">
            <template slot-scope="scope">
              <el-radio class="radio" :label="scope.row" v-model="radio" @change.native="getCurrentRow(scope.row)" >&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名稱"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button @click="toogleExpand(scope.row)" type="text">{{scope.row.name}}</el-button>
            </template>
          </el-table-column>
  </el-table>
radio: '',
policyData: {},
    //row-click    當某一行被點擊時會觸發該事件 row, event, column(可不用)
    showRow(row) {
      //賦值給radio
      console.log(row);
    },
    //獲取選中行的數據
    getCurrentRow(val) {
      this.policyData = val;
    },
    //點擊可展開項
    toogleExpand(row) {
      let table = this.$refs.tableObj;
      table.toggleRowExpansion(row);
    },

原文鏈接:https://blog.csdn.net/migexiaoliang/article/details/126071981

欄目分類
最近更新