# 文本列表

<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)
最后更新时间: 2024/7/4 下午4:10:48