前端那些事20231211-avue使用-之Crud属性之搜索标题排序

<el-button size="small" type="danger" @click="filterDic">过滤数据字典</el-button>
<el-button size="small" type="success" @click="filterNull">过滤空数据</el-button>
<el-button size="small" type="primary" @click="filter">不过滤</el-button>
<p>{{search}}</p>
<avue-crud :key="reload" :data="data" :search.sync="search" :option="option" ></avue-crud>

<script>
export default {
    data() {
      return {
        search:{
          cascader:[0,1],
          tree:0
        },
        reload:Math.random(),
        data: [{
          cascader:[0,1],
          tree:0
        }],
        option:{
          column:[{
            label:'姓名',
            prop:'name',
            search:true
          },{
              label:'级别',
              prop:'cascader',
              type:'cascader',
              search:true,
              dicData:[{
                label:'一级',
                value:0,
                children:[
                  {
                    label:'一级1',
                    value:1,
                  },{
                    label:'一级2',
                    value:2,
                  }
                ]
              }],
            },
            {
              label:'树型',
              prop:'tree',
              type:'tree',
              search:true,
              dicData:[{
                label:'一级',
                value:0,
                children:[
                  {
                    label:'一级1',
                    value:1,
                  },{
                    label:'一级2',
                    value:2,
                  }
                ]
              }]
            }]
        }
      }
    },
    methods:{
      refresh(){
        this.reload=Math.random()
      },
      filter(){
        this.option.searchFilterDic=false
        this.option.searchFilterNull=false
        this.refresh()
      },
      filterDic(){
        this.option.searchFilterDic=true
        this.refresh()
      },
      filterNull(){
        this.option.searchFilterNull=true
        this.refresh()
      }
    }
}
</script>

搜索功能