cfc/cfc-web/src/components/KnowledgeTable/index.vue

<template>
  <el-table
    :data="list"
    v-loading="loading"
    stripe
    border
    style="width: 100%"
    @selection-change="$emit('selection-change', $event)"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="title" label="知识标题" min-width="200" show-overflow-tooltip />
    <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.content | truncate(100) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="80" align="center" />
    <el-table-column prop="status" label="状态" width="80" align="center">
      <template slot-scope="scope">
        <el-tag :type="scope.row.status === 1 ? 'success' : 'info'" size="small">
          {{ scope.row.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200" fixed="right">
      <template slot-scope="scope">
        <el-button size="small" type="text" @click="$emit('edit', scope.row)">编辑</el-button>
        <el-button size="small" type="text" @click="$emit('bind-dimension', scope.row)">维度</el-button>
        <el-button size="small" type="text" @click="$emit('bind-tag', scope.row)">标签</el-button>
        <el-button size="small" type="text" style="color: #f56c6c" @click="$emit('delete', scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'KnowledgeTable',
  props: {
    list: { type: Array, default: () => [] },
    loading: { type: Boolean, default: false }
  },
  filters: {
    truncate(text, len) {
      if (!text) return ''
      return text.length > len ? text.substring(0, len) + '...' : text
    }
  }
}
</script>