el-table实现表格整行选中状态,背景颜色切换

 

<el-table :data="tableData" @row-click="handleRowClick" :rowClassName="tableRowClassName" 
    :header-row-style="{color:'#333',fontWeight:'bold',fontSize:'14px'}" style="width: 100%"> 
    <el-table-column
        prop="totalPrice"
        label="现金总额"> 
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="注册时间">
        <template slot-scope="scope">
            <div> 
                <el-switch"
                    v-model="scope.row.experienceFlag"
                    >
                </el-switch>
            </div>
        </template>
    </el-table-column>
    <el-table-column
        prop="address"
        label="消费签名时间">
        <template slot-scope="scope">
            <div>
                {
  { scope.row.dateFlag?'限制':'不限制' }}
            </div>
        </template>
    </el-table-column>  
    <el-table-column
        prop="address"
        label="员工">
    </el-table-column> 
    <el-table-column
        prop="categoryName"
        label="获客渠道">
    </el-table-column> 
    <el-table-column 
        label="选择">
        <template slot-scope="scope">
            <div>
                <svg-icon iconClass="praise" v-show="scope.$index!=tableRowIndex" class="icons praise verticalMiddle" ></svg-icon>
                <span class="el-icon-check checkValTable" v-show="scope.$index==tableRowIndex"></span>
            </div>
        </template>
    </el-table-column> 
</el-table>
<script>  
    export default{  
        data(){
            return{
                tableData:[],
                tableRowIndex:'-1'
            }
        },
        methods:{
            //选择行
            handleRowClick(row,rowIndex){ 
                //获取选择行的下标
                console.log(rowIndex);
                this.tableRowIndex=this.getArrayIndex(this.tableData,row)
                console.log('tableRowIndex');
                console.log(this.tableRowIndex);
                this.tableRowClassName(row,this.tableRowIndex);
            },
           //最终与下方获取到的数组下标,与选中的下标对比,若相等则将指定行增加highLight-row类名
            tableRowClassName({row,rowIndex}){
                if(rowIndex==this.tableRowIndex){ 
                    return 'highlight-row'
                }
            },
            getArrayIndex(arr,obj){
                var i=arr.length;
                //循环获取所选行的数据与表格列表数组的某个下标数据是否相等
                //若相等返回下标
                while(i--){
                    if(arr[i]===obj){
                        return i;
                    }
                }
                return -1;
            },
        }
    }
</script>

相关推荐

  1. el-table点击每一背景颜色

    2024-02-22 07:48:02       30 阅读
  2. element-plus el-table表格默认选中某一

    2024-02-22 07:48:02       19 阅读
  3. vue3中el-table实现表格合计

    2024-02-22 07:48:02       40 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-22 07:48:02       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-22 07:48:02       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-22 07:48:02       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-22 07:48:02       18 阅读

热门阅读

  1. [opencvsharp]将Mat转float数组

    2024-02-22 07:48:02       29 阅读
  2. CSS总结

    CSS总结

    2024-02-22 07:48:02      27 阅读
  3. scss导出颜色变量为空对象

    2024-02-22 07:48:02       28 阅读
  4. 事件流 事件委托

    2024-02-22 07:48:02       33 阅读
  5. Vue中v-model的原理

    2024-02-22 07:48:02       26 阅读
  6. docker入门介绍

    2024-02-22 07:48:02       32 阅读
  7. Backend - Docker 离线卸载

    2024-02-22 07:48:02       28 阅读
  8. Vue3利用父子组件实现字典

    2024-02-22 07:48:02       32 阅读
  9. linux系统离线安装docker服务教程

    2024-02-22 07:48:02       34 阅读
  10. 深度学习基础之《TensorFlow框架(5)—会话》

    2024-02-22 07:48:02       30 阅读
  11. select滑动分页请求数据

    2024-02-22 07:48:02       28 阅读
  12. springboot 控制层 aop 日志

    2024-02-22 07:48:02       29 阅读
  13. 深度学习????????

    2024-02-22 07:48:02       30 阅读
  14. BeautifulSoup的使用与入门

    2024-02-22 07:48:02       30 阅读