Vue实现下拉表格组件

本文实例为大家分享了Vue实现下拉表格组件的具体代码，供大家参考，具体内容如下

JS

export default {
  name: "selectTable",
  data() {
    return {

      total: 0,
      //表单验证
      rules: {
        userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }]
      },
      tableData:[],
      formData:{
        userName:"",
        position:"",
        rows: 15,
        page: 1,
      },
      queryInfo:{},
      showTree: false,
      selectData:{
        userName:''
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    // 获取查询数据
    getTableData() {
      this.$axios.get('/api/smartbs/userPower/selectPersonList',{params:this.formData}).then((res) => {
        if (res.data.success) {
          this.tableData = res.data.data.rows
          this.total = res.data.data.total
        }
      })
    },
    // 点击input 阻止冒泡 控制table显示隐藏
    deptogglePanel (event) {
      event || (event = window.event)
      event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
      this.showTree ? this.tableHide() : this.tableShow()
    },
    tableShow() {
      this.showTree = true
      document.addEventListener('click', this.tableHideList, false)
    },
    tableHide() {
      this.showTree = false
      document.addEventListener('click', this.tableHideList, false)
    },
    tableHideList(e) {
      if (this.$refs.tableList&& !this.$refs.tableList.contains(e.target)) {
        this.tableHide()
      }
    },
    // 点击table节点
    handleRegionNodeClick (data) {
      this.selectTableId = data.id
      this.showTree = false
      this.$refs.verification.resetFields();
      this.selectData.userName = data.userName // 用户名字
      this.$emit('getUserName',this.selectData.userName)
    },
    dolNandleSizeChange(val) {
      this.formData.rows = val;
      this.formData.page = 1;
      this.getTableData()
    },
    dolHandleCurrentChange(val) {
      this.formData.page = val;
      this.getTableData()
    },
    // 手动输入
    changeTab(val) {
      this.$emit('getUserName',val)
    },
    // 表单验证
    submitForm() {
      this.$refs.verification.validate((valid) => {
        if (valid) {
          return valid
        } else {
          return false;
        }
      });
    },
  }
}

CSS

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。