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)
如何设置点击流程状态单元格里面的值,然后出弹窗
最佳答案
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
没有点击事件,单元格里面有个流程状态列 我要变成可以点击
@码一码ba: 那你div上加个@click就能触发啊
@复制粘贴机器人:
<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: 不知道你贴这段代码的意思。。你的意思是，如果直接在div上加click ， 在点击按钮时会同时触发，所以不满足你的需求？
@复制粘贴机器人: 可以满足 ,这个是我查的别的解决方案..感谢
其他回答(1)
0
<template slot-scope="scope">
<el-button @click='handleClick'>....
</template>
自定义插槽的时候根据实际情况看使用按钮还是其他的基础控件，然后追加点击事件
不用按钮,就点击出弹窗
这样的话不会显示点击事件 因为在optionsResolution数组里面有流程状态列了 这样会多增加一个流程状态列
