element 之 table 表格

版权声明：本文为QQ帝国原创博客，转载请附上链接，谢谢。 https://blog.csdn.net/QQ_Empire/article/details/88845256

一、elementUi的tabel组件复选框控制禁止选择

<el-table-column 
   type="selection" 
   width="55" 
   :selectable='checkboxInit'>
</el-table-column>

//methods里
checkboxInit(row,index){
　　if (row.withdrawState==2)//这个判断根据你的情况而定
　　　　return 0;//不可勾选，或者是return false/true
　　else
　　　　return 1;//可勾选
}

二、过滤器（根据数据条件显示不同内容）

<el-table-column align='center' label="审批通过时间" >
    <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date|Filter_date }}</span>
    </template>
</el-table-column>

filters:{
     Filter_date(val){
         return val==1?"啊啊啊":(val==2?"对对对":"发发发")
     }
  },

三、表格样式

    1、行样式   :row-style="tableRowStyle"

    2、头部样式   :header-cell-style='tableHeaderColor'

<el-table :data="tableData" border 
     :height="tableHeight" 
     :row-style="tableRowStyle" 
     :header-cell-style='tableHeaderColor'  
 fit >
       <el-table-column align='center' label="项目" >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
                       
  </el-table>

data () {
    return {   
      tableHeaderColor: {
          'background':'#3D8990',
          'color':'#fff'
      },
      
    }

或 methods里

// 修改table header的背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: lightblue;color: #fff;font-weight: 500;'
      }
    }，
// 修改table tr行的背景色
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: pink'
    },

3、改变字体样式

<el-table-column prop="isPass" label="是否通过">
	<template scope="scope">
		<span v-if="scope.row.isPass==='1'" style="color: green">审核通过</span>
		<span v-else-if="scope.row.isPass==='2'">待审核</span>
		<span v-else style="color: red">未通过</span>
	</template>
</el-table-column>