Avue.js框架 自定义字段内容和操作
Avue.js框架下标签自定义字段和内容和操作
在Avue.js框架下,使用标签时,想要自定义某一列(某一个字段)。比如说改变颜色并且支持点击跳转到其他页面。这里使用插槽的方法实现。
option部分代码
fromslot:true,表示打开此字段的插槽控制
{
label: "隧道名称",
prop: "tunnelName",
type: "input",
fromslot:true,
rules: [{
required: true,
message: "请选择隧道名称",
trigger: "blur"
}],
width:160,
search: true,
fixed: true,
display: false,
searchOrder:6,
},
vue.js部分代码
此处有点击事件,跳转操作就可以在jumpToDetail函数里面实现,style="color: blue;"则表示修改此列字的显示颜色
<template slot-scope="scope" slot="tunnelName">
<span @click="jumpToDetail(scope.row)" style="color: blue;">{{ scope.row.tunnelName }}</span>
</template>