el-table获取读取数据表中某一行的数据属性

el-table获取读取数据表中某一行的数据属性，更改处理某一列数据显示方式

本文记录获取数据表中某一行数据的方法

1点击某一行获取该数据

使用 @row-click和row

<el-table
   :data="classWorkTaskList"
   :default-sort="{ prop: 'userId', order: 'descending' }"
   style="width: 100%"
   empty-text="该班级还没有布置作业"
   @row-click="test"
>
      <el-table-column prop="title" label="题目" />
      <el-table-column prop="workTaskId" label="ID" sortable />
      <el-table-column prop="startDate" label="开始时间" sortable />
      <el-table-column prop="finishDate" label="截止时间" sortable />
  </el-table>
</el-card>

在js的methods里写该方法

test(row){
    console.log('被点击了');
    console.log(row);
    console.log(row.title);
}

前端检查效果如下：

2改变某一列数据，对某一列数据处理后再展示

比如当你需要把数据库中的表示男性，女性，其他性别 的0，1，2在表中用转化成汉字时。或者是让某一列数据可点击，等等。
用scope.row.xxx来获取这一行的这一列的属性。
下面的代码是让作业的id可点击

<el-table
   :data="classWorkTaskList"
   :default-sort="{ prop: 'userId', order: 'descending' }"
   style="width: 100%"
   empty-text="该班级还没有布置作业"
>
      <el-table-column label="题目" >
          <template #default="scope">
              <div style=" cursor: pointer;">
                  {
   {scope.row.title}}
              </div>
          </template>
      </el-table-column>
      <el-table-column prop="workTaskId" label="ID" sortable />
      <el-table-column prop="startDate" label="开始时间" sortable />
      <el-table-column prop="finishDate" label="截止时间" sortable />
  </el-table>
</el-card>

下面是让学生名称可点击，让性别由数字表示变成汉字表示

<el-table
	 :data="classStudentList"
	 :default-sort="{ prop: 'userId', order: 'descending' }"
	 style="width: 100%"
	 empty-text="该班级还没有学生加入"
                >
        <el-table-column   label="昵称" >
            <template #default="scope">
                <div style=" cursor: pointer;">
                    {
   {scope.row.name}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="userId" label="ID" sortable />
        <el-table-column label="性别">
            <template #default="scope">
                <div>
                    {
   {sexChange(scope.row.sex)}}
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" />
    </el-table>
</el-card>

js中定义方法

//性别字符转化
 sexChange(sex){
     if(sex==0){
         return '男';
     }else if(sex==1){
         return '女';
     }else {
         return '其他';
     }
 },

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦