更新记录

1.0.0（2023-07-20）

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

平台兼容性

use-table-v3

表格的二次封装

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

属性说明

使用示例

    //形式一
    <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}
          ={(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({ 
  ionChange: (e) => {//当选择项发生变化时会触发该事件
    console.log(e, "ionChange---");
  },
});

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

效果图