搜索栏重置清空表单内容

      <a-row class="row-item-search">
        <a-form class="search-form" :form="searchForm" layout="inline" @submit="handleSearch">
          <a-form-item label="商品名称">
            <a-input v-decorator="['goods_name']" placeholder="请输入商品名称" allow-clear />
          </a-form-item>
          <a-form-item label="商品分类">
            <a-tree-select
              :treeData="categoryListTree"
              :dropdownStyle="{ maxHeight: '500px', overflow: 'auto' }"
              allowClear
              v-decorator="['category_id', { initialValue: 0 }]"
            ></a-tree-select>
          </a-form-item>
          <a-form-item class="search-btn">
            <a-button type="primary" icon="search" html-type="submit">搜索</a-button>
            <a-button @click="reset" style="margin-left:10px">重置</a-button>
          </a-form-item>
        </a-form>
      </a-row>
      
      
     /**
     * 刷新列表
     * @param Boolean bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(true)
    },
    
    reset() {
      this.queryParam = {}
      this.searchForm.resetFields()
      this.handleRefresh(true)
    },

时间戳处理

methods: {
//方法
  formatDateTime(dateTime) {
    const date = new Date(dateTime * 1000);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();

           const formattedDate = `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
                return formattedDate;
              }
            }
调用
console.warn(this.record.end_time);

const formattedDate = this.formatDateTime(this.record.end_time);
console.warn(formattedDate);

this.formattedDate = formattedDate;
//时间选择年月日时分插件，对获取的值进行处理
onChange(value, dateString) {
  console.log(dateString)
  const timestamp = Math.floor(Date.parse(dateString) / 1000)
  console.log(timestamp)
  this.form.setFieldsValue({
	end_time: timestamp,
  })
},

表格

表格单选，默认勾选，查看状态下禁止勾选

父组件

<vote-list-form
    @ActiveID="ActiveID"
    ref="voteListForm"
    :fatherVoteId="fatherVoteId"           
  ></vote-list-form>
  
  import voteListForm from './voteListForm'
  export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),     
      pageType: null,
      mdl: {},   
     fatherVoteId: null,
    }
  },
  components: {
    voteListForm,
  },
  mounted() {
 
  },
  methods: {
    ActiveID(val) {
      console.log(val, 2222)
      let newVal = Number(val)
      this.form.setFieldsValue({
        vote_id: newVal,
      })
    },
    detail() {
      this.mdl = JSON.parse(this.$route.query.record)
      this.defaultListCover = [this.mdl.cover]
      if (this.pageType == 'edit' || this.pageType == 'view') {
        const {
          form: { setFieldsValue },
        } = this
        const data = _.pick(this.mdl, ['vote_id', 'candidate_name', 'candidate_info'])
        setFieldsValue(data)
        console.log('详情', this.mdl.vote_id)
        this.$nextTick(() => {
          this.fatherVoteId = this.mdl.vote_id
          console.log('this.fatherVoteId', this.fatherVoteId)
          this.$refs.voteListForm.DefaultCheck()
          if(this.pageType == 'view'){
            this.$refs.voteListForm.viewMode=true
          }
        })
      }
    },
  },
}

子组件

<template>
  <div style="border: 1px solid #e8e8e8; padding-top: 10px">
    <div>
      <a-card :bordered="false">
     
        <s-table
          ref="table"
          rowKey="vote_id"
          :columns="columns"
          :data="loadData"
          :alert="false"
          :pageSize="10"
          :rowSelection="rowSelection"
        >
          <span slot="vote_title" slot-scope="text">
            <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
          </span>
          <span slot="start_time" slot-scope="text, item">
            <ellipsis :length="20" tooltip> {{ item.start_time }}~{{ item.end_time }} </ellipsis>
          </span>
          <span slot="cover.preview_url" slot-scope="text">
            <img :src="text" class="ava" />
          </span>
          <span slot="vote_status" slot-scope="text">
            <!-- 10 未开始，20进行中，30已结束 -->
            <a-tag :color="text == '10' ? '' : text == '20' ? 'green' : 'red'">{{
              text == '10' ? '未开始' : text == '20' ? '进行中' : '已结束'
            }}</a-tag>
            <!-- fatherVoteId=>{{ fatherVoteId }} -->
          </span>
        </s-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { STable } from '@/components'
import * as Api from '@/api/activity/activity'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
const columns = [
  {
    title: '编号',
    dataIndex: 'vote_id',
  },
  {
    title: '评选名称',
    dataIndex: 'vote_title',
    scopedSlots: { customRender: 'vote_title' },
  },
  {
    title: '封面',
    dataIndex: 'cover.preview_url',
    scopedSlots: { customRender: 'cover.preview_url' },
  },
  {
    title: '参赛人数',
    dataIndex: 'candidate_count',
  },

  {
    title: '发起人',
    dataIndex: 'admin.real_name',
  },
  {
    title: '活动开始时间-结束时间',
    dataIndex: 'start_time',
    scopedSlots: { customRender: 'start_time' },
  },
  {
    title: '发布时间',
    dataIndex: 'create_time',
  },
  {
    title: '当前状态',
    dataIndex: 'vote_status',
    scopedSlots: { customRender: 'vote_status' },
  },
]
const statusList = [
  { name: '未开始', value: 10 },
  { name: '进行中', value: 20 },
  { name: '已结束', value: 30 },
]

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
  },
  props: {
    fatherVoteId: { type: Number, required: false },
  },
  data() {
    this.columns = columns
    return {
      statusList,
      // 当前表单元素
      searchForm: this.$form.createForm(this),     
      mdl: null,
      // 查询参数
      queryParam: {},
      loadData: (param) => {
        return Api.voteList({ ...param, ...this.queryParam }).then((response) => response.data.list)
      },
      selectedRowKeys: null,
      selectedRows: [],
      viewMode: false, // 查看模式的状态
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: [this.selectedRowKeys],
        onChange: this.onSelectChange,
        type: 'radio', // 设置为单选模式
      }
    },
  },
  mounted() {},
  methods: {
    DefaultCheck() {
      this.$nextTick(() => {
        this.selectedRowKeys = this.fatherVoteId
        console.log('DefaultCheck子组件', this.selectedRowKeys)
      })
    },
    onSelectChange(selectedRowKeys) {
      if (this.viewMode) {
        // 如果处于查看模式，不更新选中行
        return
      }
      this.selectedRowKeys = selectedRowKeys[0]
      this.$emit('ActiveID', this.selectedRowKeys)
    }, 
  },
}
</script>