使用vue 对列表的某列进行编辑、触发事件、字典值转换 _vue点击列表某一条编辑

1. 有一个table：

<el-table :data="tableList" border style="width 100%">

①、对table的某一列可输入编辑

<el-table-column prop="attr1" align="center" label="测试"> 

<template slot-scope="scope">

<el-input v-model="scope.row.attr1" type="text" placeholder="测试" size="mini"></el-input>

</template>

</el-table-column>

②、对table的某一列进行字典值转换（针对单一，如果多个转换有公共的方法，在评论区留言，我会补充在评论区）

<el-table-column prop="attr1" align="center" label="测试">

<template slot-scope="scope">

{{getDictOptions(scope.row.attr1)}}

</template>

</el-table-column>

③、对table的某一列有触发事件

<el-table-column prop="attr1" align="center" label="测试">

<template slot-scope="scope">

触发事件常用的有 click 和  change 等：

click触发：直接点击现有的数据

<el-button type="text" size="small" @click="xxxxx">{{scope.row.attr1}}</el-button>

change触发： 输入数据后触发

<el-input v-model="scope.row.attr1" type="text" placeholder="测试" size="mini" @change="xxx"></el-input>

</template>

</el-table-column>

</el-table>

data (){

 return {

xxxx: [

{ value: '10', label: '测试' }

]

 }

}

method: {

getDictOptions (val) {

return this.xxxx.find(item => item.value === val).label

}

}