el-table展開行修改

本文轉載自查看原文 2020-08-21 16:29 688 Vue

直接進入正題，官網上el-table的展開行樣式如下：

我不想顯示前面的展開符號，並且想增加一個按鈕，點擊就可以展開和關閉，

想到一個辦法，首先讓展開符號那一列不顯示，然后在新增一個按鈕綁定一個點擊方法，開控制其展開和關閉。

1、將擴展符號列隱藏掉

第一步：將擴展列的寬度置為0，黑色加粗並帶有下划線處

<el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand" width="0">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名稱">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所屬店鋪">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店鋪 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分類">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店鋪地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="商品 ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="商品名稱"
      prop="name">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="desc">
    </el-table-column>
  </el-table>

修改完效果如下：

發現擴展符號還在，這時就要修改CSS屬性了，將其隱藏

第二步：修改CSS將擴展符號隱藏

  .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%;
  }
  /*此處為新增CSS，在vue中使用要加/deep/*/
  /deep/ .el-table__expand-icon{
    visibility: hidden;
  }

此時效果如下：

2、新增按鈕，並添加方法，點擊展開或關閉

在table上新增屬性，並新增一列用於展示展開按鈕，注意斜體下划線處。

<el-table
      :data="tableData"row-key="id":expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand" width="0">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名稱">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所屬店鋪">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店鋪 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分類">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店鋪地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="商品名稱"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="expandRow(scope.row)">展開</el-button>
        </template>
      </el-table-column>
    </el-table>

然后新增一個expandRow()方法

expandRow(row){
    if (this.expands.indexOf(row.id) < 0) {
        this.expands = [];
        this.expands.push(row.id);
    } else {
        this.expands = [];
    }
},

並在data中新增一個expands數組變量

data() {
    return {
        tableData: [{
            id: '12987122',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優質淡奶，奶香濃而不膩',
            address: '上海市普陀區真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
        }, {
            id: '12987123',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優質淡奶，奶香濃而不膩',
            address: '上海市普陀區真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
        }, {
            id: '12987125',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優質淡奶，奶香濃而不膩',
            address: '上海市普陀區真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
        }, {
            id: '12987126',
            name: '好滋好味雞蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷蘭優質淡奶，奶香濃而不膩',
            address: '上海市普陀區真北路',
            shop: '王小虎夫妻店',
            shopId: '10333'
        }],
        expands:[],
    }
},

整個Vue組件代碼如下：

<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      :expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand" width="0">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名稱">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所屬店鋪">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店鋪 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分類">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店鋪地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="商品名稱"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="expandRow(scope.row)">展開</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

    export default {
        component: 'tableDemo',
        data() {
            return {
                tableData: [{
                    id: '12987122',
                    name: '好滋好味雞蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷蘭優質淡奶，奶香濃而不膩',
                    address: '上海市普陀區真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987123',
                    name: '好滋好味雞蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷蘭優質淡奶，奶香濃而不膩',
                    address: '上海市普陀區真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987125',
                    name: '好滋好味雞蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷蘭優質淡奶，奶香濃而不膩',
                    address: '上海市普陀區真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }, {
                    id: '12987126',
                    name: '好滋好味雞蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷蘭優質淡奶，奶香濃而不膩',
                    address: '上海市普陀區真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333'
                }],
                expands: [],
            }
        },
        methods: {
            expandRow(row) {
                if (this.expands.indexOf(row.id) < 0) {
                    this.expands = [];
                    this.expands.push(row.id);
                } else {
                    this.expands = [];
                }
            },
        }
    }
</script>

<style scoped>
  .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%;
  }

  /deep/ .el-table__expand-icon {
    visibility: hidden;
  }

</style>

View Code

效果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 element-ui實現表格el-table展開行 VUE使用el-table展開行加載子節點table聯動勾選《VUE專欄四》 Table展開行 el-table樹形改變展開箭頭 Vue el-table 展開顯示明細 bootstrap table的展開行問題 el-table el-table 修改指定單元格樣式修改el-table滾動條樣式 vue elementui如何修改el-table頭部樣式