vue-admin-studentmanagent/src/pages/index/views/table-demo/state-table/index.vue

<template>
  <div>
    <el-alert
      effect="dark"
      :closable="false"
      title="基于 Element 的 Table 组件进行二次封装，实现数据驱动，支持所有 Table 参数 -- 带状态表格"
      type="info"
      style="margin-bottom: 20px;"
    />
    <com-table
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :row-class-name="tableRowClassName"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ComTable from '_c/Table/index.vue'

const columns = [
  {
    key: 'date',
    label: '日期'
  },
  {
    key: 'name',
    label: '姓名'
  },
  {
    key: 'address',
    label: '地址'
  }
]

const tableData = [
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }
]

export default defineComponent({
  // name: 'StateTable',
  components: {
    ComTable
  },
  setup() {
    const loading = ref<boolean>(true)
    setTimeout(() => {
      loading.value = false
    }, 1000)

    function tableRowClassName({ rowIndex }: any) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }

    return {
      columns,
      tableData,
      loading,
      tableRowClassName
    }
  }
})
</script>

<style lang="less" scoped>
@{deep}(.el-table) {
  .warning-row {
    background: oldlace;
  }
}

@{deep}(.el-table) {
  .success-row {
    background: #f0f9eb;
  }
}
</style>