vue實現一個通用的分頁列表

創建一個通用的Table組件

<template>
  
  <div class="data-table">
    <el-table
      :data="myTableData"
      border
      size="small"
      @selection-change="selectionChange">
      
      <el-table-column v-if="type == 'selection'"
           type="selection"
           label="選擇"
           width="55">
      </el-table-column>
      
      <!-- 序號 -->
      <el-table-column v-if="type == 'index'"
           type="index" label="序號"
           width="55">
      </el-table-column>
      
      <!-- 單元格 -->
      <el-table-column v-for="(item, index) in fieldData" :key="index"
         :label="item.label"
         :prop="item.field"
         :width="item.width"
         :sortable="item.sortable"
         :formatter="(row, column, cellValue, index) => formatter(row, column, cellValue, index, item)"
      />
      <!-- 插槽 額外 操作按鈕自己控制 -->
      <slot name="opts"></slot>
    </el-table>

    <el-pagination v-if="page"
       @current-change="pageChange"
       @size-change="sizeChange"
       :page-size="pageSize"
       :page-sizes="pageSizeList"
       background
       :layout="pageLayout"
       :total="myTotal">
    </el-pagination>
  </div>
  
</template>

<script>
  export default{
    components: {},
    data(){
      return {
        checkboxArr: [],
        radio: '',
        formObj: null,
        tableClassName: '',
        id: '',
        successFieldObj: {},
        checkTrData: [],  // 多選數據
        myTableData: this.tableData,
        myTotal: this.total,  // 總條數
        myPageSize: this.pageSize,  // ，每頁條數
      }
    },
    props: {
      // 數據總條數
      total: {
        default: 0,
        type: Number
      },
      // 表格類型：帶索引  選擇框
      type: {
        default: '',
        type: String
      },
      // 字段集合
      fieldData: {
        default: (() => []),
        type: Array
      },
      // 表格數據集合
      tableData: {
        default: (() => []),
        type: Array
      },
      // 是否需要分頁
      page: {
        default: false,
        type: Boolean
      },
      // 每頁顯示條數
      pageSize: {
        default: 5,
        type: Number
      },
      // 可切換每頁條數集合
      pageSizeList: {
        default: (() => [10, 20, 50, 100]),
        type: Array
      },
      pageLayout: {
        default: 'sizes, prev, pager, next',
        type: String
      }
    },
    mounted: function () {
    },
    watch: {
      // 監控表格數據修改 從新渲染表格
      tableData() {
        this.myTableData = this.tableData;
      },
      // 監聽頁面數據總數修改
      total() {
        this.myTotal = this.total;
      },
      // 修改每頁條數
      pageSize() {
        this.myPageSize = this.pageSize;
      }
    },
    methods: {
      selectionChange(choosetr) {
        this.checkTrData = choosetr;
      },
      sizeChange(size) {
        this.$emit('sizeChange', size);
      },
      getChooseData() {
        return this.checkTrData;
      },
      //分頁
      pageChange(pageIndex){
        this.$emit('pageChange',pageIndex);
      },
      
      // 格式化處理數據內容  后面日期格式化換成第三方插件
      // rowData: row, column, cellValue, index
      // fieldData 字段信息
      formatter(row, column, cellValue, index, fieldData) {
        //console.log(fieldData.fieldType);
        if (fieldData.fieldType === 'date') {
          const date = new Date(Number(cellValue));
          return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
        }
        return cellValue;
      }
    }
  }

</script>

<style scoped="">
</style>

<template>
  <!-- 主機記錄 -->
  <div>
    <Table
      :fieldData="fieldData"
      :tableData="tableData"
      :page="true"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :total="total"
    >
        <el-table-column
          slot="opts"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
    </Table>
 
  </div>
</template>

<script>

  // 表格組件
  import Table from 'component/table'
  
  export default{
    components: {
      Table
    },
    data(){
      return {
        total: 0,        //總記錄數
        currentPage:1,   //初始頁
        pagesize:10,    // 每頁的數據
        data:[],
        tableData: [],
        fieldData: [
          {
            field: 'title',
            label: '主機名',
            width: ''
          },
          {
            field: 'IP',
            label: 'IP地址'
          },
        ]
      }
    },
    props: {},
    mounted () {
      this.$store.commit('updateBreadcrumb', [
        {
          text: '首頁',
          path: ''
        },
        {
          text: '主機列表',
          path: ''
        },
      ]);
    },
    created() 
    {
      this.gethosts();
    },
    methods: 
    {
      getChooseData()
       {
        //查看選中數據
        //console.log( this.$refs['testForm'].getChooseData() , '--getChooseDatar--');
      },
      pageChange(pageIndex) 
      {
        console.log("觸發分頁事件");
        console.log(pageIndex);
        this.currentPage=pageIndex;

        this.tableData=this.data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);;
      },
      sizeChange(size)
      { 
        //觸發每頁顯示的條數
        console.log("觸發了改變每頁顯示條數");
        console.log(size);

        this.pagesize=size;
        this.tableData=this.data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
      },
      gethosts()
      {
        return this.$http.getAllHosts({},{notify: false})
          .then((data) => {
            //console.log(data);
            //console.log(this.pagesize);
            this.data=data;
            this.tableData=data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
            this.total=data.length;
        });
      }
    }
  }

</script>

<style scoped="">
</style>

 

實現把列中的數字變成字符串

    <el-table
      :data="myTableData"
      border
      size="small"
      @selection-change="selectionChange">
      
      <el-table-column v-if="type == 'selection'"
           type="selection"
           label="選擇"
           width="55">
      </el-table-column>
      
      <!-- 序號 -->
      <el-table-column v-if="type == 'index'"
           type="index" label="序號"
           width="55">
      </el-table-column>
      
      <!-- 單元格 -->
      <el-table-column v-html v-for="(item, index) in fieldData" :key="index"
         :label="item.label"
         :prop="item.field"
         :width="item.width"
         :sortable="item.sortable"
         :formatter="(row, column, cellValue, index) =>item.formatter(row, column, cellValue, index, item)"
      />
      <!-- 插槽 額外 操作按鈕自己控制 -->
      <slot name="opts"></slot>
    </el-table>

  // 表格組件
  import Table from 'component/table'
  
  export default{
    components: {
      Table
    },
    data(){
      return {
        total: 0,        //總記錄數
        currentPage:1,   //初始頁
        pagesize:10,    // 每頁的數據
        data:[],
        tableData: [],
        fieldData: [
          {
            field: 'title',
            label: '主機名',
            width: '',
            formatter:function(row, column, cellValue, index, item)
            {
              return cellValue;
            }
          },
          {
            field: 'IP',
            label: 'IP地址',
            formatter:function(row, column, cellValue, index, item)
            {
              return cellValue;
            }
          },
          {
            field: 'status',
            label: '狀態',
            formatter:function(row, column, cellValue, index, item)
            {
              if(cellValue==0)
              {
                return "<el-button type='success'>正常</el-button>";
              }
              else if(cellValue==1)
              {
                return "<el-button type='info'>一般告警</el-button>";
              }
              else if(cellValue==2)
              {
                return "<el-button type='warning'>告警</el-button>";
              }
              else
              {
                return "<el-button type='danger'>異常</el-button>";
              }
            },

          },
        ]
      }
    }

 

把列中的值轉換成相應的html標簽

  1.不要把需要變成模板的列傳遞到fieldData集合中

 

2.在業務表的view中添加模板列即可

<template>
  <!-- 主機記錄 -->
  <div>
    <Table
      :fieldData="fieldData"
      :tableData="tableData"
      :page="true"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :total="total"
    >

    <el-table-column slot="opts" label="狀態" prop="status">
       <template slot-scope="scope">                   
          <p v-if="scope.row.status=='1'">
               <el-button type="success">成功</el-button>
          </p>
           <p v-else-if="scope.row.status=='2'">
                <el-button type="success">成功</el-button>
           </p>
            <p v-else-if="scope.row.status=='3'">
                 作廢
            </p>
            <p v-else-if="scope.row.status=='4'">
                 停用
            </p>                    
        </template>
     </el-table-column>

     <el-table-column
          slot="opts"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small">查看</el-button>
          </template>
      </el-table-column>
    </Table>
 
  </div>
</template>

 

實現通用分頁排序刪除過濾表格組件

<template>
  
  <div class="data-table">
    <el-table
      :data="myTableData"
      :default-sort="mysort"
      border
      size="small"
      @selection-change="selectionChange"
      >
      
      <el-table-column v-if="type == 'selection'"
           type="selection"
           label="選擇"
           width="55">
      </el-table-column>
      
      <!-- 序號 -->
      <el-table-column v-if="type == 'index'"
           type="index" label="序號"
           width="55">
      </el-table-column>
      
      <!-- 單元格 -->
      <el-table-column  v-for="(item, index) in fieldData" :key="index"
         :label="item.label"
         :prop="item.field"
         :width="item.width"
         :sortable="item.sortable"
         :formatter="(row, column, cellValue, index) =>formatter(row, column, cellValue, index, item)"
      />
      <!-- 插槽 額外 操作按鈕自己控制 -->
      <slot name="opts"></slot>
    </el-table>

    <el-pagination v-if="page"
       @current-change="pageChange"
       @size-change="sizeChange"
       :page-size="pageSize"
       :page-sizes="pageSizeList"
       background
       :layout="pageLayout"
       :total="myTotal">
    </el-pagination>
  </div>
  
</template>

<script>
  export default{
    components: {},
    data(){
      return {
        checkboxArr: [],
        radio: '',
        formObj: null,
        tableClassName: '',
        id: '',
        successFieldObj: {},
        checkTrData: [],  // 多選數據multipleSelection
        myTableData: this.tableData,
        myTotal: this.total,  // 總條數
        myPageSize: this.pageSize,  // ，每頁條數
        mysort:this.tableSort //傳遞的默認排序規則
      }
    },
    props: {
      // 數據總條數
      total: {
        default: 0,
        type: Number
      },
      // 表格類型：帶索引  選擇框
      type: {
        default: '',
        type: String
      },
      // 字段集合
      fieldData: {
        default: (() => []),
        type: Array
      },
      // 表格數據集合
      tableData: {
        default: (() => []),
        type: Array
      },
      tableSort: {
        default:(() => {}),
        type: Object
      },
      // 是否需要分頁
      page: {
        default: false,
        type: Boolean
      },
      // 每頁顯示條數
      pageSize: {
        default: 5,
        type: Number
      },
      // 可切換每頁條數集合
      pageSizeList: {
        default: (() => [10, 20, 50, 100]),
        type: Array
      },
      pageLayout: {
        default: 'sizes, prev, pager, next',
        type: String
      }
    },
    mounted: function () {
    },
    watch: {
      // 監控表格數據修改 從新渲染表格
      tableData() {
        this.myTableData = this.tableData;
      },
      // 監聽頁面數據總數修改
      total() {
        this.myTotal = this.total;
      },
      // 修改每頁條數
      pageSize() {
        this.myPageSize = this.pageSize;
      }
    },
    methods: {
      selectionChange(choosetr) {
        console.log(choosetr);//選中行的row對象
        this.checkTrData=choosetr;
      },
      sizeChange(size) {
        this.$emit('sizeChange', size);
      },
      getChooseData() {
         return this.checkTrData;
      },
      //分頁
      pageChange(pageIndex){
        this.$emit('pageChange',pageIndex);
      },
      
      // 格式化處理數據內容  后面日期格式化換成第三方插件
      // rowData: row, column, cellValue, index
      // fieldData 字段信息
      formatter(row, column, cellValue, index, fieldData) {
        //console.log("formatter");
        if (fieldData.fieldType === 'date') {
          const date = new Date(Number(cellValue));
          return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
        }
        return cellValue;
      }
    }
  }

</script>

<style scoped="">
</style>

<template>
  <!-- 主機記錄 -->
  <div>
    <el-button type="danger" @click="batchdelete">批量刪除</el-button>
    <el-button type="info" @click="addhost">添加</el-button>
    <Table
       ref="hoststable"
      :fieldData="fieldData"
      :tableData="tableData"
      :page="true"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
      :total="total"
      type="selection"
      :tableSort="tablSort"
    >

    <el-table-column slot="opts" label="狀態" prop="status"
    :filters="[{ text: '成功', value: '1' }, { text: '告警', value: '2' }]"
     :filter-method="filterTag">
       <template slot-scope="scope">                   
          <p v-if="scope.row.status=='1'">
               <el-button type="success">成功</el-button>
          </p>
           <p v-else-if="scope.row.status=='2'">
                <el-button type="info">告警</el-button>
           </p>
            <p v-else-if="scope.row.status=='3'">
                <el-button type="warning">嚴重告警</el-button>
            </p>
            <p v-else-if="scope.row.status=='4'">
                <el-button type="danger">異常</el-button>
            </p>                    
        </template>
     </el-table-column>
     <el-table-column slot="opts" label="狀態2" prop="status">
       <template slot-scope="scope">
        <el-tag
          :type="scope.row.status === 2 ? 'primary' : 'success'"
          disable-transitions>{{scope.row.status}}</el-tag>
      </template>
     </el-table-column>

     <el-table-column
          slot="opts"
          label="功能操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small"  @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
            <el-button type="text" size="small">操作日志</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
      </el-table-column>
    </Table>
 
  </div>
</template>

<script>

  // 表格組件
  import Table from 'component/table'
  
  export default{
    components: {
      Table
    },
    data(){
      return {
        total: 0,        //總記錄數
        currentPage:1,   //初始頁
        pagesize:10,    // 每頁的數據
        data:[],
        tablSort:{prop:'id', order:'descending'},//默認排序規則
        tableData: [],
        fieldData: [
         {
            field: 'id',
            label: '編號'
          },
          {
            field: 'title',
            label: '主機名',
            sortable:true     //設置可以按這個字段排序
          },
          {
            field: 'IP',
            label: 'IP地址',
            sortable:true
          }
        ]
      }
    },
    props: {},
    mounted () {
      this.$store.commit('updateBreadcrumb', [
        {
          text: '首頁',
          path: ''
        },
        {
          text: '資產管理',
          path: ''
        },
        {
          text: '主機列表',
          path: ''
        }
      ]);
    },
    created() 
    {
      this.gethosts();
    },
    methods: 
    {
      getChooseData()
      {
         //查看選中數據
         console.log(this.$refs['hoststable']);
         console.log(this.$refs['hoststable'].getChooseData());
         const rows=this.$refs['hoststable'].getChooseData();
         return rows;
         // if (rows.length>0) 
         // {
         //   rows.forEach(row => {
         //       console.log(row.IP);
         //   });
         // } 
         // else 
         // {
         //   console.log("沒有選中任何行");
         // }
      },
      batchdelete()
      {
         const rows=this.getChooseData();
         if (rows.length>0) 
         {
           rows.forEach(row => {
               console.log(row.IP);
           });
           this.$message({
            type: 'sucess',
            message: "批量刪除成功"
          });
         } 
         else 
         {
           this.$message({
            type: 'error',
            message: "沒有選中任何行"
          });
         }
      },
      pageChange(pageIndex) 
      {
        console.log("觸發分頁事件");
        console.log(pageIndex);
        this.currentPage=pageIndex;

        this.tableData=this.data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);;
      },
      sizeChange(size)
      { 
        //觸發每頁顯示的條數
        console.log("觸發了改變每頁顯示條數");
        console.log(size);

        this.pagesize=size;
        this.tableData=this.data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
      },
      gethosts()
      {
        return this.$http.getAllHosts({},{notify: false})
          .then((data) => {
            //console.log(data);
            //console.log(this.pagesize);
            this.data=data;
            this.tableData=data.slice((this.currentPage-1)*this.pagesize,this.currentPage*this.pagesize);
            this.total=data.length;
        });
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.$message({
            type: 'success',
            message: row.id
          });
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      filterTag(value,row,column) {
        const property = column['property'];
        console.log("....過濾開始.....");
        console.log(value);
        console.log(row);
        console.log(column);
        console.log(".....過濾結束....");
        return row.status === value;
      },
      addhost()
      {
        this.$router.push('/exec'); //http://127.0.0.1:9000/#/exec
        //this.$router.push('exec');//http://127.0.0.1:9000/#/host/exec
      }
    }
  }

</script>

<style scoped="">
</style>

 

添加一個路由跳轉

  addhost()
      {
        this.$router.push('add'); //http://127.0.0.1:9000/#/host/add
        
       //this.$router.push('/add');//http://127.0.0.1:9000/#/add
      }

import Vue from 'vue';
import Router from 'vue-router';
import Hosts from './index'
import HostAdd from './hostAdd'
Vue.use(Router);

export default [
  {
    path: '/host/list',
    name: 'hosts',
    component: Hosts
  },
  {
      path: '/host/add',
      name: 'hostAdd',
      component: HostAdd
  }
];

<template>
  <!-- 添加主機記錄 -->
  <div>
    <el-button type="danger">進入添加主機頁面</el-button>
  </div>
</template>

<script>

  
  export default{
    components: {
    },
    data(){
      return {}
    },
    props: {},
    mounted () {
      this.$store.commit('updateBreadcrumb', [
        {
          text: '首頁',
          path: ''
        },
        {
          text: '資產管理',
          path: '/host/list'
        },
        {
          text: '添加主機',
          path: ''
        }
      ]);
    },
    created() 
    {
    },
    methods: 
    {
      
    }
  }
</script>

<style scoped="">
</style>

 

vue傳遞屬性的兩種方式

  1.<el-dialog   :custom-class="mydailog">

必須在data里面設置相關值

data() {
   return {

     formLabelWidth:"120px",
      mydailog:"mydailog"

  }

}

  2.<el-dialog   custom-class="mydailog"> 不需要在data對象中設置任何鍵值對

  <style>   不能寫成  <style scoped> 否則不會生效

     .mydailog
      {
       color:red;
      }
  </style>

  <style> 

     .mydailog
      {
       color:red;
      }
   </style>

vue組件實現自定義css樣式 

引入custom-class屬性
 
<el-dialog
  title="添加分組"
  :visible.sync="centerDialogVisible"
  width="30%"
  center
  custom-class="mydailog">
    <el-form>
    <el-form-item label="分組名稱" :label-width="formLabelWidth">
      <el-input v-model="input" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible =false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">確 定</el-button>
  </span>
</el-dialog>

style標簽一定不能加scope屬性 否則不會生效

<style>
   .mydailog
   {
     text-align:center;
     background:red;
   }
</style>

 

vue實現table等待遠程數據加載

               <bee-table :data="logList"
               :column-config="LOG_TABLE_COLUMN"
               :pageIndex="currentPage1"
               :pageSize="pageSize"
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               @sort-change="handleSortChange"
               v-loading="tbflag"
               :total="total">
               <template slot="operation" slot-scope="{scope}">
                  <el-tooltip class="item" effect="dark" :content="scope.row.jylsh" placement="top-start">
                   <a @click="showDetail(scope.row.jylsh)">
                    {{scope.row.jylsh}}
                   </a>
                  </el-tooltip>
               </template>
              </bee-table>



 data(){
      return {
         // 當前頁
        currentPage1: 1,
        // 每頁條數
        pageSize: 10,
        // 總條數
        total: 0,
         // 主機列表數據
        tableData: [],
   
        tbflag:false
      };

getHostMonitorView()
      {
        Promise.all([
            this.getHostCpuView()
       ]).then(() => {
           this.loading = false;
       });
      },
 getHostlogs(){
         this.tbflag=true;
         return this.$http.getHostLogs({
          "appname":this.appname,
          "startTime":this.startTtime,
          "endTime":this.endTime,
          "hostname":this.selectRowHostName,
          "pageIndex":this.currentPage1,
          "pageSize":this.pageSize,
          "sortColumn":this.sortColumn,
          "sortType":this.sortType
         },{notify:true})
        .then((data) => {
             this.logList=data.list;
             this.total=data.total; 
        }).finally(()=>{
           this.tbflag=false;
        });
 }