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

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+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 里面设置需要展开的行

コメント：