前端那些事20240119-前端那些事-avue表格列配置项筛选

前端歌谣

于 2024-03-05 09:49:29 发布

阅读量417

点赞数 9

文章标签：前端

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

版权

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

312 篇文章 1 订阅

订阅专栏

文章详细介绍了如何在Vue应用中使用Vue-CRUD组件创建一个包含姓名和性别的表格，展示了如何设置自定义列格式和添加性别过滤功能。

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

<avue-crud :data="data" :option="option"></avue-crud>
<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:function(row, value , label, column){
                  return row.name +'自定义'
              }
            }, {
              label:'性别',
              prop:'sex',
              filters:true,
              dicData:[{ label: '男', value: '男' }, { label: '女', value: '女' }],
              filterMethod:function(value, row, column) {
                return row.sex === value;
              }
            }
          ]
        }
      }
    }
  }
</script>