<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 公共表格组件的开发文档
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-29 09:52:11
 * @Date: 2024-03-06 15:05:25
-->
# 父组件内使用
  · 父组件vue文件
  
  <els-table
    :btnList="feedBtnList"
    :columns="feedColumns"
    :tableData="feedTableData"
    :searchList="feedSearchList"
    @getTableData="getTableData"
    :pageSet="feedPageSet"
    @addFeed="addFeed"
    @feedBatchDelete="feedBatchDelete"
    :option="tableOption"
    :tableLoading="feedLoading"
    @handleSelectionChange="handleSelectionChange"
    @selectionChange="SelectionChange"
  ></els-table>
  <script setup>
    // 表格的数据
    const feedTableData = ref([])
    // 表格自定义按钮的点击事件 feedBtnList 内的 met 字段
    const addFeed = () => {}
    const feedBatchDelete = () => {}
    // 表格的数据改变回调事件，当点击搜索，重置，分页时都会被触发，并把查询参数返回
    const getTableData = (searchVal) => {}
    // 表格多选框的选中事件
    const handleSelectionChange = (select) => {}
    const selectionChange = (params, callback) => {
      callback(()=>{
        // 接受一个自定义回调函数
      })
    }
    // 若表格的筛选组件有联动，可以通过下面的事件进行联动
    proxy.bus.emit('change',{type:'事件类型(参考表单组件的事件)', a:'所需参数', b:'所需参数'})
    // 例：
    proxy.bus.emit('change',{type:'setValue', a:'field', b:'设置的值'})
    proxy.bus.emit('change',{type:'disabled', a:'field', b:false})
    proxy.bus.emit('change',{type:'hidden', a:'field', b:true})
  </script>

  · 父组件jsx文件配置项

  // 表格筛选条件 参数可参考公共表单组件的 fieldList
  const feedSearchList = ref([
    {
      label: '浇次',
      field: 'castTimesNo',
      clearable: true,
      width: '340px',
      placeholder: '请输入浇次',
    },
    {
      label: '加料类型',
      field: 'chargingTypes',
      type: 'select',
      width: '340px',
      clearable: true,
      multiple: true,
      placeholder: '请选择加料类型',
      options: materialChargingType.value
    },
    {
      label: '厂家',
      field: 'manufacturer',
      width: '340px',
      clearable: true,
      placeholder: '请输入厂家',
    },
    {
      label: '记录员',
      field: 'operator',
      width: '340px',
      clearable: true,
      placeholder: '请输入记录员',
    },
    {
      label: '加料日期',
      field: 'chargingTimeRange',
      width: '340px',
      type: 'date',
      enum: 'daterange', // 其他类型枚举 week, month, year, date, daterange
      placeholder: '开始日期-结束日期' // 若选择框枚举类型为daterange， 此值接受 a-b 式截取提示内容展示
    }
  ])

  // 表格的自定义按钮 hasPermi 为权限参数
  const feedBtnList = ref([
    { label: '加料录入', type: 'primary', icon:'Plus', met: 'addFeed', hasPermi:'chargingIn:information:add' },
    { label: '批量删除', type: 'danger', icon:'Delete', met: 'feedBatchDelete', hasPermi:'chargingIn:information:remove'  }, 
  ])
  // 表格列，支持多级表头，字段children
  const feedColumns = ref([
    {
      label: "加料类型",
      regular: true, // 取消此列的动态列控制
      prop: "chargingTypeName",
      minWidth: 120
    },
    {
      label: "浇次",
      regular: false, // false 或不传 此列可以动态列控制
      prop: "castTimesNo",
      minWidth: 100
    },
    {
      label: "加料时间",
      prop: "chargingTime",
      sort: true,   // 当前列是否支持前端element组件排序
      minWidth: 160
    },
    {
      label: "操作",
      minWidth: 150,
      fixed:'right',  // 公共参数，固定列
      // 自定义插槽，支持jsx语法, 若根据条件判断返回空，不可直接返回<></>虚拟元素，须返回<span></span>等真实元素
      slots: (row) => {
        return <>
          <el-button type="primary" link onClick={() => feedEditFn.value(row)} v-hasPermi={['chargingIn:information:edit']}>修改</el-button>
          <el-button type="danger" link onClick={() => feedDeleteFn.value(row)} v-hasPermi={['chargingIn:information:remove']}>删除</el-button>
        </>
      }
    },
  ])
  // 分页参数
  const feedPageSet = ref({
    pageNum: 1,
    pageSize: 10,
    total:0
  })
  // 表格的配置项
  const tableOption = ref({
    checkbox: true, // 是否展示多选框
    checkList: true, // 是否展示多选框选中数据tag
    checkKey: 'chargingAmount', // 展示多选框选中数据tag绑定的字段名， checkList为true生效
    checkMax: 3,  // 最大选择条数，不传不做限制
    index: false, // 是否展示序号
    fixed: "left", // 是否将多选框及序号列固定在最左侧
    stripe: true, // 是否斑马纹表格
    border: false, // 是否表格边框
    pageHidden: false, // 是否隐藏分页
    maxHeight: '58vh', // 表格最大高度
    rowKey: 'id', // el-table 的 row-key属性，可不传
    name: 'name', // 当一个路由地址下有多个表格组件，须传name字段，并保证name字段在项目中唯一，若不传会导致列配置功能出错！
    hidToolBar: false, // 是否隐藏列设置按钮，默认不传展示，传true隐藏
    slotFooter: function() {   // 表格底部自定义插槽
      return <span></span>
    }
  })
  
  // 注意： 如果动态列出现 xxx is defined 报错，请检查表格列Columns中的jsx语法是否引用了外部变量，local字符串函数转eval函数执行时，读取的此变量会找不到，需要在toolBar.vue中引入一下