elementui控制某一行的按钮改变文字内容和点击事件。

Question

如题，怎么控制某一行的按钮改变文字和点击事件效果？

点击完“编辑”文字变成隐藏。
把表格写成了公共组件。

<el-table :data="data.slice(((pager.pageNo)-1)*(pager.limit),(pager.pageNo)*(pager.limit))" :max-height="maxHeight" border :show-header="showHeader" stripe tooltip-effect="light" @selection-change="handleSelectionChange">
            <slot name="table_oper"/>
            <template v-for="(item, index) in columns">
                <el-table-column 
                    v-if="index != cols"
                    :key="index"
                    :prop="item.prop" 
                    :label="item.label"
                    :align="item.align?item.align:'center'"
                    :width="item.width"
                    :formatter="item.formatter?item.formatter : formatterValue"
                >
                </el-table-column>
                <el-table-column
                      v-else
                      :key="index"
                    label="操作"
                    align="center"
                      >
                  <template slot-scope="scope">
                    <el-button v-show="item.chaKan" @click="chaKanClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button v-show="item.bianJi"  @click="bianJiClick(scope.row)" type="text" size="small">编辑</el-button>
                  </template>
                </el-table-column>
            </template>
        </el-table>

调用时代码如下：

data () {
    return {
        columns: [
            {prop: 'standardJudgment',label: '标准判断类目',chaKan:true,bianJi:true},
            {prop: 'standardStatus',label: '标准状态',chaKan:true,bianJi:true},
            {prop: 'operation',label: '操作',chaKan:true,bianJi:true}
        ],
        cols:3,
        tableData: [],
    }
},

data里的columns数组某一个对象里的chaKan单独写成false也不变成隐藏状态。

Answer 1

bianJiClick这个点击事件里面改变当前的bianji的状态，biru
bianJiClick(row){
    this.columns.map((item,index)=>{
        if(item.prop == row.prop){
            item.bianji == false
            return
        }
    })
}

Answer 2

写成组件的形式 el-table 需要加上v-bind="$attrs" v-on="$listeners"，可百度了解其具体含义。
选中当前可获取当前数据row this.set(row,'bianji',false) 修改当前数据状态