1 Star 0 Fork 50

绿树白云 / avue-doc

forked from 鹏鹏 / avue-doc 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
search.md 3.20 KB
一键复制 编辑 原始数据 按行查看 历史
smallwei 提交于 2020-05-30 20:51 . init docs
<script> export default { data(){ return { form:{ zt: ["370000", "620000", "610000", "110000", "410000"], checkbox: 0, jtgj: [0, 1, 2, 3, 4] }, option:{ column: [{ label: '自定义', prop: 'zdy', slot: true },{ label: '地区', prop: 'zt', dicUrl: 'https://cli.avuejs.com/api/area/getProvince', props: { label: 'name', value: 'code' } }, { label: '多选', prop: 'checkbox', multiple: false, dicData: [{ label: '单层', value: 0 }, { label: '多层', value: 1 }] }, { label: '交通工具', prop: 'jtgj', dicData: [{ label: '飞机', value: 0 }, { label: '动车', value: 1 }, { label: '驾车', value: 2 }, { label: '其他', value: 3 }] }] } } }, methods:{ handleChange(form) { this.$message.success(JSON.stringify(form)) } } } </script>

Search 搜索

常用的表格或则列表的搜索组件,可以与form和crud等其他组件组合使用 :::tip 1.0.0+ ::::

普通用法

:::demo 使用方法和常规用法一样option配置结构体,v-model为双向数据绑定,同时包含了一个change回调事件

<avue-search :option="option" v-model="form" @change="handleChange">
 <template slot="zdy" slot-scope="scope">
    <el-tag>自定义</el-tag>
</template>
</avue-search>
<script>
export default {
  data(){
    return {
        form:{
          zt: ["370000", "620000", "610000", "110000", "410000"],
          checkbox: 0,
          jtgj: [0, 1, 2, 3, 4]
        },
        option:{
          column: [{
            label: '自定义',
            prop: 'zdy',
            slot: true
          },{
            label: '地区',
            prop: 'zt',
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
            props: {
              label: 'name',
              value: 'code'
            }
          }, {
            label: '多选',
            prop: 'checkbox',
            multiple: false,
            dicData: [{
              label: '单层',
              value: 0
            }, {
              label: '多层',
              value: 1
            }]
          }, {
            label: '交通工具',
            prop: 'jtgj',
            dicData: [{
              label: '飞机',
              value: 0
            }, {
              label: '动车',
              value: 1
            }, {
              label: '驾车',
              value: 2
            }, {
              label: '其他',
              value: 3
            }]
          }]
        }
    }
  },
  methods:{
    handleChange(form) {
      this.$message.success(JSON.stringify(form))
    }
  }
}
</script>

:::

Events

事件名 说明 参数
change 当搜索的值发生改变时的回调 form
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/greentreecloud/avue-doc.git
git@gitee.com:greentreecloud/avue-doc.git
greentreecloud
avue-doc
avue-doc
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891