avue 列表单独对一列进行个性化设置；avue一列文字样式自定义；avue一列文字显示成按钮

祝你今天也快乐

已于 2023-03-13 10:23:34 修改

阅读量604

点赞数

分类专栏： avue 文章标签：前端 vue.js

于 2023-03-01 17:58:15 首次发布

本文链接：https://blog.csdn.net/killerdoubie/article/details/129286689

版权

avue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果

 <avue-crud :option="optiondata"  :data="tabledatalsit">
      <template slot-scope="{row}" slot="leakageRate">
              <el-tag style="background:#ec808d;color:#333" v-if="row.leakageRate>20">{{ row.leakageRate }}</el-tag>
               <el-tag style="background:#f9cd90;color:#333" v-else>{{ row.leakageRate }}</el-tag>
     </template>
</avue-crud>

1.slot-scope="{row}" 插槽为了拿到当前列的数据进行渲染

2.slot="leakageRate" 配置项中字段名称 prop===> leakageRate 保持一致

3.slot: true 配置项中插槽字段必须设置为true

 optiondata: {
                column: [
                    {
                        label: "DMA分区名称",
                        prop: "DMASubregionName",
                    },
                    {
                        label: "漏损率（%）",
                        prop: "leakageRate",
                        slot: true,
                    },
                    {
                        label: "漏损量（m³）",
                        prop: "leakage",
                    }
                ]
            },