[JavaScript知识库]Vue el-table-column根据行数据添加button和修改对应数据and控制显示条件

插槽详解理解

行内添加button修改某行数据

表格代码

<el-table-column   label="操作">
    <template slot-scope="scope">
        <el-button :type="scope.row.status?'danger':'primary'" @click="changeStatus(scope.$index)" >{{ scope.row.status?'中断':'执行'}}</el-button>
    </template>
</el-table-column>

数据

 current_tasks: [
        {
          "project": "cc-aa-admin-c2334",
          "api": "/api/checik/save/chekoutttt",
          "method": "POST",
          "threads": "10",
          "duration": "100ms",
          "start_time": "2021-9-12 18:00:00",
          "executor": "珈珈",
          "status": true
        },

click事件

    changeStatus(index){
      this.current_tasks[index].status = !this.current_tasks[index].status
      this.current_tasks[index].executor = "小芽儿"
    }

效果
点击[中断]前

点击[中断]后

控制显示符合条件的行数据

 <el-table
        :data="api_list.filter((v) => v.is_disable!=1)"
        border
        style="width: 100%">
 </el-table>