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

html 复制代码
<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>
javascript 复制代码
<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>
相关推荐
半花3 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅3 小时前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
用户28003832908403 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
小菜全3 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风3 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy4 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
小菜全4 小时前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
车口4 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码4 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
因吹斯汀5 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程