首页 新闻 会员 周边

vue如何设置点击事件

0
悬赏园豆:5 [已解决问题] 解决于 2023-09-11 15:18
html:
<el-table
:height="tableHeight" :data="tableData" :option="options" tooltip-effect="dark" ref="curd" @selection-change="handleSelectionChange"
v-if="optionsVerification" size="small">
<el-table-column type="selection" fixed></el-table-column>
<el-table-column type="index" label="序号" fixed></el-table-column>
<el-table-column :show-overflow-tooltip="true" v-for="(item, index) in options" :key="index" :label="item.label"
:prop="item.prop" :width="item.width" :fixed="item.fixed">
<template slot-scope="scope">
<div v-if="item.label == '建设性质'" class="sequence">
<div class="textover" v-for="(it,i) in planAttrList" :key="i">
<span v-if="it.dispSn == '2'" v-show="it.value == scope.row.buildNatureCode">
{{'续建'}}
</span>
<span v-else v-show="it.value == scope.row.buildNatureCode">
{{'新建'}}
</span>
</div>
</div>
<div v-else-if="item.label == '电压等级'" class="sequence">
<div class="textover" v-for="(it,i) in voltageLevelCodeList" :key="i">
<span v-show="it.value == scope.row.voltageLevelCode">
{{it.name}}
</span>
</div>
</div>
<div v-else-if="item.label == '项目类别'" class="sequence">
<div class="textover" v-for="(it,i) in projectCategoryCodeList" :key="i">
<span v-show="it.value == scope.row.projectCategoryCode">
{{it.name}}
</span>
</div>
</div>
<div v-else>{{ scope.row[item.prop]!=null ? scope.row[item.prop] : "/" }}</div>
</template>
<template v-if="item.children != undefined">
<el-table-column v-for="(it, i) in item.children" :key="i" :label="it.label" :prop="it.prop" :width="it.width">
<template slot-scope="scopes">
<div>{{ scopes.row[it.prop]!==null ? scopes.row[it.prop] : "/" }}</div>
</template>
</el-table-column>
</template>
</el-table-column>
</el-table>


return:
options: [
{
label: "建设单位",
width: 180,
prop: "buildOrgName",
fixed:"left",
},
{
label: "项目名称",
width: 300,
prop: "projectName",
fixed:"left",
},
{
label: "建设性质",
width: 80,
prop: "buildNatureCode",
}
],



optionsResolution: [
{
label: "形象进度",
width: 250,
prop: "progressTarget",
},
{
label: "创优类型",
width: 105,
prop: "goodBuildType",
},
{
label: "创优目标",
width: 250,
prop: "fineTarget",
},
{
label: "年度",
width: 80,
prop: "year"
},
{
label: "流程状态",
width: 80,
click: true,
prop: "flowState",
}

],

js:
this.options = this.options.concat(rew.data).concat(this.optionsResolution)
 

如何设置点击流程状态单元格里面的值,然后出弹窗  

码一码ba的主页 码一码ba | 初学一级 | 园豆:152
提问于:2023-09-11 10:23
< >
分享
最佳答案
0
<el-table-column :show-overflow-tooltip="true" v-for="(item, index) in options" :key="index" :label="item.label"
:prop="item.prop" :width="item.width" :fixed="item.fixed">
    <template slot-scope="scope">
    </template>
  </el-table-column>

你这单元格不是有了么了么,还是说你想点击列头

收获园豆:5
复制粘贴机器人 | 小虾三级 |园豆:697 | 2023-09-11 10:58

没有点击事件,单元格里面有个流程状态列  我要变成可以点击

码一码ba | 园豆:152 (初学一级) | 2023-09-11 11:04

@码一码ba: 那你div上加个@click就能触发啊

复制粘贴机器人 | 园豆:697 (小虾三级) | 2023-09-11 11:30

@复制粘贴机器人: 
<div v-else-if="item.label == '流程状态'" class="sequence">
  <div class="textover" v-for="(it,i) in flowStateList" :key="i">
  <el-button type="text" v-if="it.value == scope.row.flowState"             @click="viewProcess(scope.row)">
  {{it.name}}
  </el-button>
  </div>
</div>

码一码ba | 园豆:152 (初学一级) | 2023-09-11 13:49

@码一码ba: 不知道你贴这段代码的意思。。你的意思是,如果直接在div上加click , 在点击按钮时会同时触发,所以不满足你的需求?

复制粘贴机器人 | 园豆:697 (小虾三级) | 2023-09-11 14:03

@复制粘贴机器人: 可以满足 ,这个是我查的别的解决方案..感谢

码一码ba | 园豆:152 (初学一级) | 2023-09-11 15:18
其他回答(1)
0

<template slot-scope="scope">
<el-button @click='handleClick'>....
</template>
自定义插槽的时候根据实际情况看使用按钮还是其他的基础控件,然后追加点击事件

bird man | 园豆:4 (初学一级) | 2023-09-11 11:25

不用按钮,就点击出弹窗  

支持(0) 反对(0) 码一码ba | 园豆:152 (初学一级) | 2023-09-11 11:28

这样的话不会显示点击事件  因为在optionsResolution数组里面有流程状态列了  这样会多增加一个流程状态列

支持(0) 反对(0) 码一码ba | 园豆:152 (初学一级) | 2023-09-11 11:30
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册