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

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

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

<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也不变成隐藏状态。

回答

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

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

以上是 elementui控制某一行的按钮改变文字内容和点击事件。 的全部内容， 来源链接： utcz.com/a/28466.html

回到顶部