el-table实现获取指定一行,一列的数据,设置统一样式

182 阅读1分钟

@cell-click="cellClick"

:cell-style="setRowcellClass"

      <el-table  :data="tableData" @cell-click="cellClick"  :cell-style="setRowcellClass">
        <el-table-column :prop="item.items" :label="item.username" :width="item.width" v-for="item in data" :key="item.skillId" show-overflow-tooltip />
        
        <el-table-column v-if="operate" label="操作" style="width: 200px">
          <template #default="scope">
            <slot name="data" :data="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>

methods:{
//指定当前列表头为员工姓名时,才可点击跳转
    cellClick(row, column, cell, event) {
      if (column.label === "员工姓名") {
        this.$router.push({
          name: "EmployeeResume",
          query: {
            pername: row.staff_name,
          },
        });
      }
    },
    
  //row为当前行,column为当前列
    setRowcellClass(row, column, rowIndex, columnIndex) {
      if (row.column.label === "员工姓名") {
        return "color: #0372c1; text-decoration: underline; cursor: pointer";
      }
   },
}