# 文本列表

<sm-text-list
  :content="[
    { 站台: '漠河', 省份: '黑龙江1', 海拔: '296', 平均最低气温: '-47', 最热七天气温: '29' },
    { 站台: '塔河', 省份: '黑龙江2', 海拔: '357.4', 平均最低气温: '-42', 最热七天气温: '29' },
    { 站台: '呼玛', 省份: '黑龙江3', 海拔: '177.4', 平均最低气温: '-42', 最热七天气温: '30' },
    { 站台: '额尔古纳右旗', 省份: '内蒙古1', 海拔: '581.4', 平均最低气温: '-42', 最热七天气温: '29' },
    { 站台: '图里河', 省份: '内蒙古2', 海拔: '732.6', 平均最低气温: '-46', 最热七天气温: '27' },
    { 站台: '黑河', 省份: '黑龙江4', 海拔: '166.4', 平均最低气温: '-37', 最热七天气温: '30' },
    { 站台: '满洲里', 省份: '内蒙古3', 海拔: '661.7', 平均最低气温: '-37', 最热七天气温: '30' },
    { 站台: '海拉尔', 省份: '内蒙古4', 海拔: '610', 平均最低气温: '-40', 最热七天气温: '30' },
    { 站台: '小二沟', 省份: '内蒙古5', 海拔: '286', 平均最低气温: '-42', 最热七天气温: '30' },
    { 站台: '嫩江', 省份: '黑龙江5', 海拔: '242.2', 平均最低气温: '-40', 最热七天气温: '30' }
  ]"
  :header="['站台', '省份', '海拔', '平均最低气温', '最热七天气温']"
  :fields="['站台', '省份', '海拔', '平均最低气温', '最热七天气温']"
  fontSize="14"
  :autoRolling="true"
  :rows="6"
  :autoResize="true"
></sm-text-list>

# Attributes

参数	说明	类型	可选值	默认值
content	展示数据	object[ ]	-	-
dataset	数据来源。若 content 和 dataset 都存在时，content 的优先级较大	iPortalDataParameter \| iServerDataParameter \| GeoJSONParameter	-	-
header	表头	string[ ]	-	-
rows	显示行数	string	-	6
autoRolling	逐条滚动	boolean	-	false
fontSize	字体大小	number \| string	-	-
autoResize	自适应大小	string	-	true
fields	字段名	string[ ]	-	-
columnWidths	列表宽度	number[ ]	-	-
rowStyle	行样式	rowStyle	-	-
headerStyle	表头样式	headerStyle	-	-
thresholdsStyle	阈值样式	ThresholdsStyle	-	-
columns	排序和前后缀	columns	-	-
highlightOptions	需要高亮的行索引列表	array	-	-
highlightCurrentRow	是否开启高亮当前行	boolean	-	true
highlightColor	高亮颜色	string \| function	-	#b9b9b9

支持主题混入参数和定时刷新混入参数

# headerStyle

参数	说明	类型	可选值	默认值
show	是否显示表头	boolean	-	true
color	字体颜色	string	-	-
background	背景颜色	string	-	-
sortBtnSelectColor	排序图标选中的颜色	string	-	-
sortBtnColor	排序图标默认颜色	string	-	-
height	表头的高度	number	-	-

# rowStyle

参数	说明	类型	可选值	默认值
oddStyle	奇数行样式（目前只支持配置 background 属性）	object	-	-
evenStyle	偶数行样式（目前只支持配置 background 属性）	object	-	-
height	行高度	number	-	-

# ThresholdsStyle

// 设置每列不同阈值下的背景颜色和字体颜色，示例如下：
[
  // 第一列的background阈值配置
  {
    "type": "background",
    "data": [
      {
        "max": 85,
        "color": "rgba(14, 229, 18, 0)"
      },
      {
        "min": 85,
        "color": "#E31C1C"
      }
    ]
  },
  // 第一列的color阈值配置
  {
    "type": "color",
    "data": [
      {
        "max": 800,
        "color": "#E31C1C"
      },
      {
        "min": 800,
        "max": 1200,
        "color": "#F05940"
      },
      {
        "min": 1200,
        "color": "#0CD54A"
      }
    ]
  },
  // 第二列的color阈值配置
  {
    "type": "color",
    "data": [
      {
        "max": 204,
        "color": "#0CD54A"
      },
      {
        "min": 400,
        "color": "#E31C1C"
      }
    ]
  }
]

# columns

// 每一列都可以设置排序和前后缀：
// （1）sort 属性可选项： true | false | undefined
// （2）defaultSortType 属性可选项：'ascend' | 'descend' | 'none'
// （3）fixInfo 属性配置前后缀
// （4）slots 可以通过该属性配置支持 slot 的属性，如 slots: { customRender: 'XXX'}
//            目前支持slot: 
//            customRender: 生成复杂单元格的slot
[
  {
    "header": "服务",
    "field": "name",
    "sort": true,
    "slots": {
      "customRender": "name"
    },
    "defaultSortType": "none",
    "fixInfo": {
      "prefix": "",
      "suffix": ""
    },
    "width": 0
  },
  {
    "header": "访问人数 ",
    "field": "visitCount",
    "sort": true,
    "defaultSortType": "ascend",
    "fixInfo": {
      "prefix": "",
      "suffix": ""
    },
    "width": 0
  }
]

# Events

name	说明	回调参数
contentChange	列表内容变化时触发	function(content)
cell-click	鼠标点击数据行时触发	function(item, rowIndex, event)
cell-mouse-enter	鼠标移入数据行时触发	function(item, rowIndex, event)
cell-mouse-leave	鼠标移出数据行时触发	function(item, rowIndex, event)

← iframe 边框 →