element UI (table表格)

table 左对齐

<el-table
	:header-cell-style="{'text-align':'left'}"
	:cell-style="{'text-align':'left'}"
	>

table表格内容过长时显示省略号,并且鼠标悬停时显示全部信息

<el-table-column
   property="deviceIn"
   :show-overflow-tooltip="true"
   label="进门设备标识">
</el-table-column>

table多选时,需要disabled某些选项

<el-table-column
	align="center"
	type="selection"
	:selectable="checkSelect"
	width="55">
</el-table-column>

  /**
   * methods里面
   * row：当前行数据
   * index：当前第几位
   */
 checkSelect (row,index) {
      let isChecked = true;
      if (row.dealerName === null) { // 判断里面是否存在某个参数
        isChecked = true
      } else {
         isChecked = false
      }
    return isChecked
    },

table的分页信息靠右

<div style="display: flex;justify-content: flex-end;;margin-top: 10px">
<el-pagination
	background
	@size-change="sizeChangeOfLoss"
	@current-change="currentChangeOfLoss"
	layout="sizes,prev, pager, next,total"
	:current-page="pageOfLoss"
	:page-size="sizeOfLoss"
	:total="totalOfLoss">
</el-pagination>

本身翻页时，序号永远都是从 1 开始，自定义序号，切换页码时，第一页为1-10，第二页就是11-20

--- table表序号列
<el-table-column
        label="序号"
        type="index"
        width="50">
    <template slot-scope="scope">
        <span>{{scope.$index+(page - 1) * size + 1}} </span>
    </template>
</el-table-column>

//解决多条记录,刷新数据时,序号不归1
refreshData() {
    this.initPage();
    this.initData();
},
//初始化page
initPage() {
    this.total = 0;
    this.page = 1;
    this.size = 10;
},
//初始化数据方法
initData() {
    this.loading = true;
    this.getRequest('/card/stu?page=' + this.page + '&size=' + this.size).then(resp => {
        this.total = resp.total;
        this.tableData = resp.list;
        this.loading = false;
    })
},