vue+element 中 table表格平时使用的整理

 

平时使用：

　　<!--
     * v-loading -> 加载时转圈圈
     * highlight-current-row -> 点击行时是否要高亮当前行
     * height -> 纯数字时单位是px，数字加单位时则这个高度会设置为 Table 的 style.height 的值
     * size -> Table 的尺寸(medium / small / mini)
     * class
     * style
    -->
    <el-table
      v-loading="true"
      :data="tableData"
      highlight-current-row
      height="450"
      size="mini"
      class="caonimabi"
      style="width: 66%">
      <!-- # -->
      <!-- <el-table-column label="#">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 + (page - 1) * per_page }}</span>
        </template>
      </el-table-column> -->

      <!--
       * show-overflow-tooltip -> 当内容过长被隐藏时显示 tooltip
       * align -> 对齐方式(left/center/right)
       * prop -> 对应列内容的字段名，也可以使用 property 属性
       * label -> 显示的标题
       * width -> 对应列的宽度
      -->
      <el-table-column
        :show-overflow-tooltip="true"
        align="left"
        prop="date"
        label="日期"
        width="180">
      </el-table-column>

      <!--
       * 插槽
      -->
      <el-table-column
        :show-overflow-tooltip="true"
        align="left"
        label="日期"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180">
        <template slot="header" slot-scope="scope">
          <span>
            <i
              class="iconfont icon-asterisk import-asterisk"
              style="color: red;"
            ></i>日期
          </span>
        </template>
        <template slot-scope="scope">
          <div>
            <el-input v-model="scope.row.date" placeholder="请输入"></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>

 

加排序：

　　<!--
     * default-sort -> 默认的排序列的 prop 和顺序,它的prop属性指定默认的排序的列，order指定默认排序的顺序
    -->
    <!--
     * sortable -> 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件(true, false, 'custom')
     * sort-orders -> 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效(包括custom)。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
     * 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序,默认['ascending', 'descending', null]
    -->

    <!-- 根据现有数据进行排序 -->
    <el-table
      :data="tableData"
      :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column
        :sort-orders='["descending", "ascending"]'
        prop="date"
        label="日期"
        sortable>
      </el-table-column>
    </el-table>
    
    <!-- 请求接口数据进行排序 -->
    <el-table
      :data="tableData"
      :default-sort = "{prop: 'date', order: 'descending'}"
      @sort-change="sortChange">
      <el-table-column
        :sort-orders="['descending', 'ascending']"
        prop="date"
        label="日期"
        sortable="custom">
      </el-table-column>
    </el-table>

 

　　// 根据排序方式，请求接口并渲染
    sortChange(column){
      console.log("prop", column.prop)
      console.log("order", column.order)
    }

 

加复选框(多选和记忆选中功能)：

　　<!--
     * row-key -> 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
     * selection-change -> 当选择项发生变化时会触发该事件
     * row-click -> 当某一行被点击时会触发该事件
    -->
    <el-table
      ref="rightTable"
      :data="tableData"
      :row-key="getRowKeys"
      @selection-change="rightTableChange"
      @row-click="handleRowClick">
      <!--
       * reserve-selection -> 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
       * type -> 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮(selection/index/expand)
      -->
      <el-table-column
        :reserve-selection="true"
        type="selection">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期">
      </el-table-column>
    </el-table>

 

　　//记录选中
    getRowKeys(row) {
      return row.id;
    },
    //复选框选择的数据
    rightTableChange(item) {
      console.log("复选框选中的所有数据", item)
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.rightTable.toggleRowSelection(row);
    },

 

参考文档：https://element.eleme.cn/#/zh-CN/component/table

<!-- # -->

      <el-table-column label="#">

        <template slot-scope="scope">

          <span>{{ scope.$index + 1 + (page - 1) * per_page }}</span>

        </template>

      </el-table-column>