elementui 表格復(fù)選框選中后，當(dāng)前行最后的按鈕顯示，到底該用哪個(gè)方法，糾結(jié)好幾天了，求幫忙解決

圖片描述

<template>
    <div class="content2">
        <template>
            <el-table
            ref="multipleTable"
            :data="tableData3"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @row-click="openDetails"
            @select="select">

                <el-table-column type="selection" width="55"></el-table-column>

                <el-table-column label="日期" width="120">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>

                <el-table-column prop="name" label="姓名" width="120"></el-table-column>

                <el-table-column prop="address" label="地址"  show-overflow-tooltip></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        {{ scope.row.date }}
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>
    </div>
</template>

<script>
export default {
    name: 'content2',
    data () {
        return {
            tableData3: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                }
            ],
            multipleSelection: []
        }
    },
    mounted: function (){
        this.$refs.multipleTable.toggleRowSelection(this.tableData3[0],true);
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        openDetails(row,event,column){
            if(event.target.nodeName!="INPUT"){
              console.log(row);
            }     
        },
        handleEdit(index,row){
            console.log(index)
        },
        select(selection,row){
            console.log(row)
        }
        
    }
}

回答

編輯回答

黑與白

存儲(chǔ)已選中行的index(或id)存在arrA數(shù)組里,然后

<el-button type="text" size="small" @click="handleEdit(scope.row)"
v-show="arrA.includes(index)">

編輯

</el-button>
完成。

2017年3月15日 08:54

編輯回答

短嘆

這是我的思路，注意我注釋的地方就行，希望能幫助到你：

//template中的編輯按鈕
<el-button size="small" @click="handleEdit(scope.$index, scope.row)" v-if="tableData3[scope.$index].isSelected">編輯</el-button>

//script里面的內(nèi)容，直接賦值替換你上面那個(gè)就行，你就能看到為什么了
export default {
    name: 'content2',
    data () {
        return {
            tableData3: [
                {
                    isSelected: true,
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                },
                {
                    isSelected: false,
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀區(qū)金沙江路 1518 弄'
                }
            ],
            multipleSelection: []
        }
    },
    mounted: function (){
        this.$refs.multipleTable.toggleRowSelection(this.tableData3[0],true); //默認(rèn)選中要和綁定的數(shù)據(jù)中的isSelected一樣同時(shí)設(shè)置
    },
    methods:{
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        openDetails(row,event,column){
            if(event.target.nodeName!="INPUT"){
              //console.log(row);
            }     
        },
        handleEdit(index,row){
            //console.log(index)
        },
        select(selection,row){
           row.isSelected = !row.isSelected; //點(diǎn)擊某行時(shí)，切換綁定的isSelected狀態(tài)便可
           //console.log(row)
        }  
    }
}

2017年6月4日 10:13