+Vue+el-table のバックアップ(No.8)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+el-table へ行く。
- 1 (2022-05-13 (金) 10:49:22)
- 2 (2022-05-26 (木) 11:28:56)
- 3 (2022-06-23 (木) 11:07:04)
- 4 (2022-07-03 (日) 14:12:41)
- 5 (2022-08-24 (水) 16:41:32)
- 6 (2022-09-03 (土) 14:17:41)
- 7 (2022-09-05 (月) 14:16:18)
- 8 (2022-09-29 (木) 13:57:22)

※前提条件：本文基于 Vue 2.0 创作

概要
显示格式
Tips

概要 †[edit]

prop 属性对应对象中的键名，用来填充数据；label 属性定义表格的列名；width 属性定义表格的列宽。

<template>
  <el-table :data="tableData" class="data_table">
    <el-table-column prop="number" label="编号" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="info" label="描述">
    </el-table-column>
  </el-table>
</template>

    data () {
      return {
        tableData: [{
          number: '2016001',
          name: '小明',
          info: '这是第一条数据'
        }, {
          number: '2016002',
          name: '小明',
          info: '这是第二条数据'
        }, {
          number: '2016003',
          name: '小明',
          info: '这是第三条数据'
        }, {
          number: '2016004',
          name: '小明',
          info: '这是第四条数据'
        }, {
          number: '2016005',
          name: '小明',
          info: '这是第五条数据'
        }]
      }
    }

↑

显示格式 †[edit]

<el-table-column
        prop="endTime"
        label="时间"
        width="90"
        :formatter="formatDate">
</el-table-column>

methods: {
    formatDate(row, column) {
        // 获取单元格数据
        let data = row[column.property]
        if(data == null) {
            return null
        }
        let dt = new Date(data)
         return dt.getFullYear() + '/' + (dt.getMonth() + 1) + '/' + dt.getDate()
    },
}

↑

Tips †[edit]

↑

设置表格全部展开 †[edit]

element-ui 中 el-table-column 里面设置 type="expand" 可设置 table 全部展开，或者展开有数据的部分。如果想让全部展开的话添加 efault-expand-all="true"

<el-table :default-expand-all="true">
   <el-table-column type="expand">
...

↑

设置有数据的行打开下拉 †[edit]

需要在table绑定两个属性

expand-row-key="expand" 和 row-key="method" method 里面设置需要展开的行

↑

超过长度显示省略号 †[edit]

<el-table-column prop="note" label="备注">
  <template slot-scope="scope">
    <span style="display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left">
      {{ scope.row.note }}
    </span>
  </template>
</el-table-column>

white-space:nowrap;/强制单行显示/
text-overflow:ellipsis;/超出部分省略号表示/
overflow:hidden;/超出部分隐藏/
width: 120px;/设置显示的最大宽度/
display:block;就是将元素显示为块级元素。

↑

expand 类型 †[edit]

全部展开/折叠

//按钮
<el-button size="mini" @click="btnExpand" style="margin-top: 8px">{{ this.isExpand ? '折叠' : '展开' }}</el-button>
<el-table ref="ctab"
>... 省略 ...
</el-table>

data() {
    return {
      isExpand: false,
}
method(){
    btnExpand() {
      this.actionUnfoldFunc(!this.isExpand);
    }, //btnExpand
    actionUnfoldFunc(isAss) {
      this.handleExpand(isAss);
    },
    handleExpand(isAss) {
      // 此判断是否为展开状态或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
      if (this.isExpand == isAss) {
        return;
      }
      this.isExpand = !this.isExpand;
      // this.data为返回的二级数据data
      this.$nextTick(() => {
        this.forArr(this.data, this.isExpand);
      });
    }, //handleExpand
    // 遍历
    forArr(arr, isExpand) {
      arr.forEach((i) => {
        // toggleRowExpansion见element文档
        this.$refs.ctab.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    }, //forArr
}

↑

动态渲染列 †[edit]

使用 v-for

简单的

<el-table style="width: 100%" border :data="tableData">
  <template v-for="(item,index) in DataList">
    <el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
  </template>
</el-table>

复杂的，里面带一个 el-input 控件的

<template v-for="(pt, index) in list">
  <el-table-column :prop="pt.Name" :label="pt.Name" :key="index">
    <template slot-scope="scope">
      <el-input v-model="scope.row[pt.Value * 1]" placeholder="请输入" />
    </template>
  </el-table-column>
</template>

↑

行点击事件 †[edit]

配合 highlight-current-row 和 setCurrentRow 使用可以将点击的行设置为高亮

<el-table ref="aaTable"
  @row-click="rowClick"
  v-loading="loading"
  highlight-current-row
  :data="dataList">
</el-table>
 
method:{
    rowClick(row){
      this.$refs.aaTable.setCurrentRow(row);
      console.log(row)
    },
}

↑

自定义空数据的插槽（未验证） †[edit]

<template slot="empty" v-if="slot.row.children.length == 0">
    <span>empty</span>
</template>

コメント：