element UI中的table

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据， slot-scope="scope"

<el-table-column label="日期" width="180">

　　 <template slot-scope="scope">

　　　　<span style="margin-left: 10px">{{ scope.row.date }}</span>

　　</template>

</el-table-column

排序

如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

    //按照创建时间排序

    sortChange(column) {

      if (column.prop == "createDate") {

        this.searchModel.orderBy = "create_date";

      }

      if (column.order == "descending") {

        this.searchModel.orderByType = "20";

      } else if (column.order == "ascending") {

        this.searchModel.orderByType = "10";

      }

      this.queryData();

    }

表尾合计行

将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，

    getSummaries(param) {

      const { columns, data } = param;

      const sums = {};

      columns.forEach((column, index) => {

        if (index === 0) {

          sums[index] = "汇总";

          return;

        }

 

        if (

          column.property == "customerName" ||

          column.property == "mobile" ||

        ) {

          return;

        }

        column.align = "right";

        const values = data.map(item => Number(item[column.property]));

        if (!values.every(value => isNaN(value))) {

          sums[index] = values.reduce((prev, curr) => {

            const value = Number(curr);

            if (!isNaN(value)) {

              return prev + curr;

            } else {

              return prev;

            }

          }, 0);

          sums[index] = sums[index].toFixed(2);

        } else {

          sums[index] = "0.00";

        }

      });

      return sums;

    }

单选

Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow

多选

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；

展开行

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

树形数据与懒加载