二次封装lement组件遇到的问题

Z时代
2024-02-15
分类：IT

封装的通用查询组件出了bug
二次封装lement组件遇到的问题
时间回显和选中的不一样

废话不多说先上代码

<template>
  <div>
    <cc-Table :tableList="tableList"></cc-Table>
  </div>
</template>
<script>
import CcTable from '../components/Table.vue'
export default {
  components: {
    CcTable
  },
  data () {
    return {
      tableList: {
        // 后台接口
        apiUrl: 'www.baidu.com',
        // 搜索
        serch: [
          { id: '1', label: '姓名', type: 'input', key: 'name' },
          { id: '2', label: '年龄', type: 'input', key: 'age' },
          {
            id: '3',
            label: '性别',
            type: 'select',
            key: 'sex',
            info: [
              { key: '0', value: '男' },
              { key: '1', value: '女' }
            ]
          },
          { id: '4', label: '开始时间', type: 'dateYmd', key: 'startTime' },
          { id: '5', label: '结束时间', type: 'dateYmd', key: 'endTime' }
        ],
        // 表格头部
        list: [
          { id: '1', prop: 'name', label: '姓名', width: '180' },
          { id: '2', prop: 'age', label: '年龄', width: '180' },
          { id: '3', prop: 'sex', label: '性别', width: '180' }
        ]
      }
    }
  },
  methods: {
    // 发送请求
    getTableList () {
    }
  },
  created () {
    this.getTableList()
  }
}
</script>
<style>
</style>

封装的表格组件

<template>
  <div>
    <!-- 查询组件 -->
    <!-- <cc-serch :search="tableList.serch"></cc-serch> -->
    <TableSerch :serch="tableList.serch" @serchData="handleMerchan"></TableSerch>
    <!-- 表格组件 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        v-for="item in tableList.list" :key="item.id"
        :prop="item.prop"
        :label="item.label"
        :width="item.width">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="200">
    </el-pagination>
  </div>
</template>
<script>
// import CcSerch from './Serch'
import TableSerch from './TableSerch.vue'
export default {
  name: 'CcTable',
  components: {
    // CcSerch,
    TableSerch
  },
  data() {
    return {
      tableData: [],
      currentPage4: 4,
      form: {}
    }
  },
  props: {
    tableList: {
      type: Object
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 子组件传递的数据
    handleMerchan(data) {
      console.log('data', data)
    },
    // 发送请求
    getTableList () {
    },
    onSubmit () {
    }
  },
  created () {
    this.getTableList()
    console.log('tableList', this.tableList)
  }
}
</script>
<style>
</style>

搜索组件

<template>
<!-- 搜索组件 -->
  <div>
    <el-form ref="form" :inline="true" :model="form" label-width="80px">
      <el-form-item v-for="item in serch" :key="item.id" :label="item.label" :prop="item.key">
        <!-- input框 -->
        <el-input v-if="item.type === 'input'" v-model="form[item.key]"></el-input>
        <!-- 下拉选择框 -->
        <el-select v-else-if="item.type ==='select'" v-model="form[item.key]">
          <el-option v-for="list in item.info" :key="list.key" :label="list.value" :value="list.key"></el-option>
        </el-select>
        <!-- data组件 -->
        <el-date-picker v-else-if="item.type ==='dateYmd' " type="date" @change="changeRuleDate($event)" value-format="yyyy-MM-DD" placeholder="选择日期" v-model="form[item.key]" style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="serchBtn">查询</el-button>
        <el-button @click="resetBtn('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'TableSerch',
  data() {
    return {
      form: {
        // name: '',
        // age: '',
        // sex: '',
        // startTime: '',
        // endTime: ''
      }
    }
  },
  props: {
    serch: {
      type: Array,
      default: () => {}
    }
  },
  watch: {
    serch: {
      handler(newVal) {
        if (Array.isArray(newVal) && newVal.length > 0) {
          newVal.forEach((item) => {
            this.$set(this.form, [item.key], '')
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    serchBtn() {
      console.log(this.form)
      this.$emit('serchData', this.form)
    },
    resetBtn(form) {
      this.$nextTick(() => {
        this.$refs[form].resetFields()
      })
    },
    changeRuleDate(value) {
      console.log('value', value)
    }
  },
  created () {
    console.log('1', this.serch)
  },
  mounted () {
    console.log('2', this.serch)
  }
}
</script>
<style>
</style>