vue+element使用小结

1.el-table的使用

1）prop:对应列内容的字段名

     当我们的一个单元格要展示两个字段时应该怎么做呢？

   prop的值不是只有一个，可以多写，每个字段用','隔开，贴段代码可能会理解的更清楚：

 <el-table-column prop="usedCpu,totalCpuCore" label="CPU使用率/总额" width="160">
                <template  slot-scope="scope">
                   {{scope.row.usedCpu?scope.row.usedCpu:0}}%/{{scope.row.totalCpuCore?scope.row.totalCpuCore:0}}核
                </template>
 </el-table-column>

 

效果图：

 

 2）show-overflow-tooltip

show-overflow-tooltip=“true”使用该属性时，当单元格里的内容溢出显示省略号时可以以tooltip的形式将内容全部展示出来，但是该属性是有兼容性的，当el-table-column下嵌套了template时，egde浏览器是不支持的，小伙伴们可能会想我不用template，直接用prop不就行了，的确，简单的需求用prop就可以，如果需要你设置单元格内容的格式呢？比如说：当单元格里的有数据时就显示该数据，没有数据时显示“-”，这时就得用到template了，先贴一段使用template的代码：

<el-table-column prop="description" label="描述">

<template slot-scope="scope">

                  <span

                    v-if="scope.row.description"

                  >{{ scope.row.description }}</span>

                  <span  v-else>-</span>

                </template>

 </el-table-column>

使用template可以解决很多单元格格式问题，但是与show-overflow-tooltip=“true”同时使用时，头疼的兼容性问题就来了，那么，我们怎么解决这个兼容性问题呢？自然是问题出在哪就从哪着手，既然是用了template导致的，那我们不用template，用另一种方法也可以设置单元格格式，这会就轮到formatter出场了，这是el-table中专门用来格式化内容的，废话不多说，直接上代码：

<el-table-column
                prop="description"
                label="描述"
                :show-overflow-tooltip="true"
                :formatter="emptyAdd"
 >

methods:{
emptyAdd (row, column, cellValue) {
      console.log(row, 'row')
      return row.description ? row.description : '-'
    },
}
    

3）slot="header"

先上张效果图：

 

 类似与在表头添加内容的布局定位时肯定的，但是一定要找对父元素，要不就不能适配各种浏览器，代码贡上：

<el-table-column prop="optStatus" label width="180px" ref="status">
            <template slot="header" slot-scope="{column, $index}">
              <!-- 下拉菜单--任务结果 -->
              <el-dropdown placement="bottom-start" id="select" @command="handleCommand">
                <span class="el-dropdown-link">
                  任务结果
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command>全部</el-dropdown-item>
                  <el-dropdown-item command="success">成功</el-dropdown-item>
                  <el-dropdown-item command="failed">失败</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>

            <template slot-scope="scope">
              <span v-if="scope.row.optStatus==='成功'" style="color:#0FC26C">成功</span>
              <span v-else style="color:#F02A38">失败</span>
            </template>
          </el-table-column>

4）做分页处理时，想让之前选中的复选框保持选中，该怎么做呢？还是直接上代码：

          <el-table
            height="678"
            :data="tableData"
            highlight-current-row
            ref="tableDataHead"
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            @sort-change="tableSortChange"
          >
  <el-table-column type="selection" width="45" :reserve-selection="true"></el-table-column>

data(){
  return{
 getRowKeys (row) {
        console.log(row, 'row')
        return row.id
      },
}
}

5)el-table中有好多方法，这些方法该如何使用：通过this.$refs.value.方法来使用

<el-table
            height="678"
            :data="tableData"
            highlight-current-row
            ref="tableDataHead"
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            @sort-change="tableSortChange"
 >


 this.$nextTick(() => {
        this.$refs.tableDataHead.toggleRowSelection(val, false)
})