Avue.js框架自定义字段内容和操作

#惊蛰#

已于 2024-08-08 09:07:51 修改

阅读量262

点赞数 9

分类专栏： Avue.js 文章标签： vue

于 2024-08-05 15:22:31 首次发布

本文链接：https://blog.csdn.net/D47255/article/details/140927357

版权

Avue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Avue.js框架自定义字段内容和操作

Avue.js框架下<avue-crud>标签自定义字段和内容和操作
- option部分代码
- vue.js部分代码

Avue.js框架下标签自定义字段和内容和操作

在Avue.js框架下，使用标签时，想要自定义某一列（某一个字段）。比如说改变颜色并且支持点击跳转到其他页面。这里使用插槽的方法实现。
示例图片

option部分代码

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部分代码

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>