vue element 自己封装table

Posted 2023-03-14

参考技术A //夫组件应用

 <div>

      <Public-Table

        :tablelist="tablelist"

        @handleSizeChange="handleSizeChange"

        @handleCurrentChange="handleCurrentChange"

        @handleSelectionChange="handleSelectionChange"

        @handleoperationClick="handleoperationClick"

      ></Public-Table>

    </div>

  tablelist: 

        tablePage: true, //是否开启分页

        currentPage: 1, //默认页数

        pageSize: 10, //默认条数

        total: 1, //默认总数

        type: "index", //状态

        tableData: [], //数据

        tabletitle: [

          //表头

          

            date: "clientid",

            title: "客户端id",

            align: "center",

            width: "200",

            render: (h, params) => 

              return h(

                "el-button",

                

                  props: 

                    type: "text"

                  ,

                  on: 

                    click: () => 

                      this.DetailsList = params.row;

                      this.Detailsstate = true;

                    

                  

                ,

                params.row.clientid

              );

            

          ,

          

            date: "username",

            title: "用户名",

            align: "center",

            width: "180"

          ,

          

            date: "ip_address",

            title: "IP地址",

            align: "center",

            width: "200"

          ,

          

            date: "port",

            title: "端口",

            align: "center",

            width: "160"

          ,

          

            date: "clean_start",

            title: "清除会话",

            align: "center",

            width: "160"

          ,

          

            date: "proto_ver",

            title: "协议版本",

            align: "center",

            width: "140"

          ,

          

            date: "keepalive",

            title: "心跳(秒)",

            align: "center",

            width: "140"

          ,

          

            date: "connected_at",

            title: "连接时间",

            align: "center",

            width: "180"

          

        ],

        operation: [

           label: "详情", size: "mini", type: "primary", value:  ,

           label: "订阅", size: "mini", type: "primary", value:  ,

           label: "踢除", size: "mini", type: "danger", value:  

        ]

      

//子组件

 <div>

    <el-table

      :data="tableDatas"

      border

      :key="tableKey"

      style="width: 100%"

      @selection-change="handleSelectionChange"

    >

      <el-table-column :type="tabletype" align="center" label="序号" width="50" />

      <template v-for="(val,i) in tabletitles">

        <!-- <el-table-column

          :align="val.align"

          :width="val.width?val.width:'auto'"

          :prop="val.date"

          :label="val.title"

        ></el-table-column>-->

        <el-table-column

          :align="val.align"

          :width="val.width?val.width:'auto'"

          :prop="val.date"

          :label="val.title"

        >

          <template slot-scope="scope">

            <ex-slot v-if="val.render" :render="val.render" :row="scope.row" :index="scope.$index"></ex-slot>

            <span v-else> scope.row[val.date] || '' </span>

          </template>

        </el-table-column>

      </template>

      <el-table-column

        label="操作"

        align="center"

        v-if="operations.length>0"

        width="240"

        fixed="right"

      >

        <template slot-scope="scope">

          <template v-for="val in operations">

            <el-button

              :size="val.size"

              :type="val.type"

              @click="handleClick(scope.$index, scope.row,val.label)"

            >val.label</el-button>

          </template>

        </template>

      </el-table-column>

    </el-table>

    <!--分页-->

    <el-pagination

      v-if="tablePage"

      style="margin-top: 10px"

      :current-page="currentPage"

      :page-sizes="[2,10, 20, 30, 40, 50]"

      :page-size="pageSize"

      layout="total, sizes, prev, pager, next, jumper"

      :total="total"

      @size-change="handleSizeChange"

      @current-change="handleCurrentChange"

    />

  </div>

</template>

var exSlot = 

  functional: true,

  props: 

    row: Object,

    render: Function,

    index: Number,

    column: 

      type: Object,

      default: null

    

  ,

  render: (h, data) => 

    const params = 

      row: data.props.row,

      index: data.props.index

    ;

    if (data.props.column) params.column = data.props.column;

    return data.props.render(h, params);

  

;

export default 

  components: 

    exSlot

  ,

  props: 

    tablelist: Object

  ,

  data() 

    return 

      tableKey: 0,

      tablePage: this.tablelist.tablePage || false,

      operations: this.tablelist.operation || [], //操作方法

      tabletype: this.tablelist.type || "index", //渲染状态

      tableDatas: this.tablelist.tableData || [], //数据

      tabletitles: this.tablelist.tabletitle || [], //表头

      currentPage: this.tablelist.currentPage || 1, //初始页

      pageSize: this.tablelist.pageSize || 10, //每页的数据

      total: this.tablelist.total || 0 //总条数

    ;

  ,

  created() 

    console.log("table");

  ,

  computed: ,

  methods: 

    //pageSize 改变时会触发

    handleSizeChange(val) 

      this.$emit("handleSizeChange", val);

    ,

    //currentPage 改变时会触发

    handleCurrentChange(val) 

      this.$emit("handleCurrentChange", val);

    ,

    //多选框回调

    handleSelectionChange(selection) 

      // console.log(selection);

      this.$emit("handleSelectionChange", selection);

    ,

    //操作返回

    handleClick(index, row, label) 

      this.$emit("handleoperationClick",  index, row, label );

    

  ,

  watch: 

    tablelist: 

      //监听传值数据变化更新视图

      deep: true, //深度监听设置为 true

      handler: function(newV, oldV) 

        this.tableDatas = newV.tableData;

        this.total = newV.total;

      

    

  

//有待优化，请各位看官提出宝贵意见，积极采纳