vue.js+elementUI中插槽的使用

插槽

条件判断

  <el-table-column label="是否管理人员" align="center" width="100">
    <template slot-scope="scope">
      <p v-text="scope.row.isManage == 1 ? '是' : '否'"></p> 
    </template>
  </el-table-column>

字典匹配

  <el-table-column label="职工身份" align="center" width="80"
    ><template slot-scope="scope">
      {{ employeeStatuse[parseInt(scope.row.identityNo) - 1] }}
    </template>
  </el-table-column>

employeeStatuse: ["全民", "劳务派遣", "三新员工"],

单击事件

  <el-table-column width="100" label="操作" align="center">
    <template slot-scope="scope">
      <div
        style="color: #1890ff; cursor: pointer"
        @click="goPath('details', scope.row.id)"
      >
        详情/修改
      </div>
    </template>
  </el-table-column>

按钮

  <el-table-column
    label="操作"
    align="center"
    width="120"
    class-name="small-padding fixed-width"
  >
    <template slot-scope="scope">
      <el-button
        size="mini"
        type="text"
        icon="el-icon-edit"
        @click="handleUpdate(scope.row)"
        >修改</el-button>
      <el-button
        size="mini"
        type="text"
        icon="el-icon-delete"
        @click="handleDelete(scope.row)"
        >删除</el-button>
    </template>
  </el-table-column>
</el-table>