avue-crud配置某一列表格数据样式的两种方法

在项目开发中，我们需要对表格数据的某一列或者几列的数据换成突出的颜色。如果是使用ant或者element组件库开发，这是个特别容易实现的功能，但对于avue-crud来说，因为它是对element的二次封装，一系列的属性配置特别多，所以找到合适的属性方法相对ant或者element来说还是有些难度的。下面是我对这种问题的两种解决方法，写个随笔记录下。

方法一：使用 cell-class-name属性配置

思路：avue-crud 的cell-class-name 属性是单元格的回调方法（也可以使用字符串为所有单元格设置一个固定的className），function ( row, column, rowIndex, columnIndex ) / String。在menthos里定义一个回调方法，进行判断，然后返回不同的类名。具体代码如下所示：

在avue-crud中定义cell-calss-name:

<avue-crud :option="option"
			header-cell-class-name="my-table-header":table-loading="loading" :data="data":permission="permissionList" ref="crud" :page="page"
      		@search-change="searchChange" :cell-class-name="addCellClass" @search-reset="searchReset"
      		@size-change="sizeChange"  @refresh-change="refreshChange" @on-load="onLoad" @row-click="handleRowClick">

下面是js中的代码：

methods: {
      addCellClass({row,column}){
        if((column.property === 'FIsDistributeDisplay' && row.FIsDistributeDisplay=='已配完') || (column.property === 'FIsStackerDisplay' && row.FIsStackerDisplay=='已码完')){
          return 'cell-green'
        }else if((column.property === 'FIsDistributeDisplay' && row.FIsDistributeDisplay=='未开始') || (column.property === 'FIsStackerDisplay' && row.FIsStackerDisplay=='未开始')){
          return 'cell-red'
        }else if((column.property === 'FIsDistributeDisplay' && row.FIsDistributeDisplay=='进行中') || (column.property === 'FIsStackerDisplay' && row.FIsStackerDisplay=='进行中')){
          return 'cell-yellow'
        }    
	}	
}

css代码：

.cell-red{
    color:red;
  }
  .cell-green{
    color:green;
  }
  .cell-yellow{
    color:#F7C660;
  }

方法二：使用slot插槽

插槽在日常vue开发中是不可或缺的一部分。
思路：给需要配置的单元格列配置插槽属性即可。
过程：给column属性里的特定列对象里配置：slot: true 即可。
具体代码如下所示：

option: {
	column: [
		{ label: "配货状态", prop: "FIsDistributeDisplay", hide: false, align:"center",minWidth:70, slot: true},
	]
}

在avue-crud直接使用插槽：

<avue-crud>
	<template slot='FIsDistributeDisplay' slot-scope="scope">
		<span style="color: red">{{scope.row.FIsDistributeDisplay}}span>
	template>	
avue-crud>

以上就是两种方法的具体实现，当然使用插槽的方式是使用最多的，也是第一时间能够想到的，只是在开发中不能只限于一种形式，要多想几种方法，这样才能提升自己，如果大家还有其他方法，也欢迎在下方评论。