前端那些事20240122-前端那些事-表头配置之自定义列表头

最新推荐文章于 2024-09-11 10:06:17 发布

前端歌谣

最新推荐文章于 2024-09-11 10:06:17 发布

阅读量329

点赞数 7

文章标签：前端状态模式

本文链接：https://blog.csdn.net/qq_41632427/article/details/135754211

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

文章介绍了如何在Vue的CRUD组件中设置列标签（如姓名和年龄）以及对应的属性（如name和sex），并展示了如何使用模板slot定制列头显示。

摘要由CSDN通过智能技术生成

<avue-crud ref="crud" :option="option" :data="data">
  <template slot="nameHeader" slot-scope="{column}">
      <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        option: {
          column: [{
            label: '姓名',
            prop: 'name',
            headerslot:true,
          }, {
            label: '年龄',
            prop: 'sex'
          }]
        },
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
      }
    }
}
</script>