vue3表格的二次封装

表格的二次封装

vue3 element-plus el-table的二次封装

属性说明

属性名	类型	默认值	说明
headerList	Array	[]	表格头部数据
httprequest	Function	() => {}	获取表格数据
propsObj	Object	{}	table属性
onEvents	Object	{}	Table 事件
isNeedResultFlag	Boolean	true	不需要对数据进行操作
data	Array	[]	表格数据
total	Number	0	表格数据总数
tableRef	Function	() => {}	Table ref

使用示例

	//形式一
	<useTable
        :headerList="headList"
        :httprequest="httprequest"
        :onEvents="{
			onSortChange: sortChange
		}"
        ref="useTableRun"
    ></useTable>

	//	形式二
	<useTable
        :propsObj="propsObj"
        :headerList="headList"
        :httprequest="httprequest"
        :onEvents="onEvents"
        ref="useTableRun"
        :isNeedResultFlag="false"
        :data="[...listArr,...tableData]"
        :total="total"
    ></useTable>

// setup 形式下
import { ref,reactive } from 'vue'
import useTable from "@/components/use-table-v3/useTable"
const useTableRun = ref()
const tableData = reactive([])
const total = ref(0)
const listArr = reactive([]) //需要手动合并插入的数据
const headList = reactive([
  {
    props: {
      type: "selection",//多选框
      width:'40px'
    },
  },
  {
    props: {
      type: "index",
      prop: "",
      label: "序号",
      width: "100px",
    },
  },
  {
    props: {
      prop: "title",
      label: "标题",
    },
  },
  {
    props: {
      prop: "push_time",
      label: "时间",
      sortable: 'custom', //表格排序
      width: '150px'
    },
  },
  {
    props: { //可以使用jsx 写法
      prop: "status",
      label: "状态",
    },
    renderHTML: (h, scope) => {
      console.log(scope.row.status)
      return (
        <switchCons
          modelValue={scope.row.status}
          disabled={BtnTitles.a3.hidden}
          onChange={(news) => changeOpt(scope.row, news)}
        ></switchCons>
      );
    },
  },
  {
    props: {
      prop: "name",
      label: "名称",
      "show-overflow-tooltip": true,
    },
    renderHTML: (h, scope) => {
      return (
        <div class="user_info flex_column_center">
          <img style="flex-shrink:0;" src={scope.row.avatar} />
          <div>{scope.row.name}</div>
        </div>
      );
    },
  },
  {
    props: {
      label: "操作",
      fixed: "right",
      width: "130px",
    },
    renderHTML: (h, scope) => {
      return (
        <div style="display:flex; width:140px;">
          <div class="public-title" onClick={() => toDetails(scope.row)}>
            详情
          </div>
        </div>
      );
    },
  },
]);
const httprequest = async (params) => {
  const res = await xxxx({...params}) //接口
	//当isNeedResultFlag = false时，说明我们需要手动合并插入的数据
  	total.value = res.total
	tableData.push(...res.data)
  return res
}
const toDetails = (val) => {
  router.push({
    path: '/list/' + val.id
  })
}
const sortChange = ({ prop, order }) => { //表格排序
  if(order) {
    ruleForm.property = prop
    ruleForm.order = order === 'ascending' ? 'up' : 'down'
    getRequestRes()
  }
}

const getRequestRes = (type) => {
  useTableRun.value.getRequestRes(type) //更新数据
}

const propsObj = reactive({//合并单元格
  spanMethod: ({ row, columnIndex }) => {
    if(row.process !== undefined) {
      if(columnIndex == 1) {
        return [1,9]
      } else if(columnIndex == 9) {
        return [1,1]
      } else {
        return [0,0]
      }
    }
  },
})

const onEvents = reactive({ 
  onSelectionChange: (e) => {//当选择项发生变化时会触发该事件
    console.log(e, "onSelectionChange---");
  },
});


//也可以注册到全局 页面中直接使用不需要import
// main.ts文件
import App from '@/App.vue'
import useTable from "@/components/use-table-v3/useTable"
const app = createApp(App)
app.component('useTable', useTable)