主键

vue2

vue3

暂无数据

对开开放了`cell-style`和`row-style`方法

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>
<script setup>
import { ref } from 'vue'
const data = ref([
  {
    ids: 1,
    name: '张三',
    sex: '男'
  }, {
    ids: 2,
    name: '李四',
    sex: '女'
  }
])
const option = ref({
  rowKey: 'ids',
  column: [
    {
      label: '姓名',
      prop: 'name'
    }, {
      label: '性别',
      prop: 'sex'
    }
  ]
})
  </script>

宽度

vue2

vue3

暂无数据

可以配置`width`属性控制每列的宽度，如果不配置则会自适应

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>
<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 1,
    name: '张三',
    sex: '男'
  }, {
    id: 2,
    name: '李四',
    sex: '女'
  }
])
const option = ref({
  column: [
    {
      width: 200,
      label: '姓名',
      prop: 'name'
    }, {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

索引

vue2

vue3

暂无数据

设`index`属性为`true`即可，`indexLabel`设置表格的序号的标题,默认为`#`

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const data = ref([
  {
    name: '张三',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  index: true,
  indexLabel: '序号',
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
});
</script>

自定义索引

vue2

vue3

暂无数据

<template>
  <tvue-crud :data="data"
             :option="option">
    <template #index="{row,index}">
      <el-tag>{{index+1}}</el-tag>
    </template>
  </tvue-crud>
</template>
  <script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [{
          label: '序号',
          prop: 'index',
          fixed: true
        },
        {
          label: '姓名',
          prop: 'name'
        }, {
          label: '性别',
          prop: 'sex'
        }
        ]
      },
    };
  }
}
  </script>

内容超出隐藏

vue2

vue3

暂无数据

`overHidden`设置`true`即可超出列表宽度的内容以省略号显示

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const data = ref([
  {
    name: '张三的名字是一个很长很长的内容',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      overHidden: true,
      width: 80,
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
});
</script>

内容格式化

vue2

vue3

暂无数据

`formatter`方法格式化内容

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const data = ref([
  {
    name: '张三',
    sex: '男',
    select: '110000'
  },
  {
    name: '李四',
    sex: '女',
    select: '120000'
  }
]);

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      formatter: (val, value, label) => {
        return val.name + '格式化内容';
      }
    },
    {
      label: '性别',
      prop: 'sex'
    },
    {
      label: '字典',
      prop: 'select',
      type: 'select',
      formatter: (val, value, label) => {
        return `${label}(${value})`;
      },
      props: {
        label: 'name',
        value: 'code'
      },
      dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
    }
  ]
});
</script>

支持 html 转译

vue2

vue3

暂无数据

配置`html`设置为`true`即可支持`formatter`转义`html`代码

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const data = ref([
  {
    name: '张三',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      html: true,
      formatter: (val) => {
        return `<b style="color:red">${val.name}格式化内容</b>`;
      }
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
});
</script>

列隐藏

vue2

vue3

暂无数据

一共是有 4 列的`hide`和`showColumn`可以达到控制列显隐控制

<template>
  <tvue-crud :option="option"
             :data="data"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const data = ref([
  {
    text1: '内容1-1',
    text2: '内容1-2',
    text3: '内容1-3',
    text4: '内容1-4'
  },
  {
    text1: '内容2-1',
    text2: '内容2-2',
    text3: '内容2-3',
    text4: '内容2-4'
  }
]);

const option = ref({
  align: 'center',
  headerAlign: 'center',
  column: [
    {
      label: '列内容1',
      prop: 'text1',
    },
    {
      label: '列内容2',
      prop: 'text2',
    },
    {
      label: '列内容3',
      prop: 'text3',
      hide: true
    },
    {
      label: '列内容4',
      prop: 'text4',
      showColumn: false,
    }
  ]
});
</script>

持久化存储

提示

如果有远程字典类的配置或者加载错误情况，需要初始化下组件CRUD 初始化

vue2

vue3

暂无数据

<template>
  <tvue-crud ref="crud"
             :key="reload"
             :option="option"
             :data="data">
    <template #menu-left="{size}">
      <el-button @click="saveOption"
                 type="danger"
                 :size="size">保存配置</el-button>
    </template>
  </tvue-crud>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 设置常量
const key = 'tvue-option';

// 定义响应式数据
const reload = ref(Math.random());
const data = ref([
  { text1: '内容1-1', text2: '内容2-1', text3: '110000' },
  { text1: '内容1-2', text2: '内容2-2', text3: '120000' },
  { text1: '内容1-3', text2: '内容2-3' },
  { text1: '内容1-4', text2: '内容2-4' },
  { text1: '内容1-5', text2: '内容2-5' }
]);
const option = ref({
  sortable: true,
  addBtn: false,
  menu: false,
  border: true,
  align: 'center',
  column: [
    { label: '列内容1', prop: 'text1' },
    { label: '列内容2', prop: 'text2' },
    { label: '列内容3', prop: 'text3', type: 'select', props: { label: 'name', value: 'code' }, dicUrl: 'https://cli.avuejs.com/api/area/getProvince' }
  ]
});

// 在组件挂载后读取本地存储
onMounted(() => {
  const storedOption = localStorage.getItem(key);
  if (storedOption) {
    option.value = JSON.parse(storedOption);
    reload.value = Math.random();
  }
});

// 保存配置到本地存储
const saveOption = () => {
  localStorage.setItem(key, JSON.stringify(option.value));
  ElMessage.success('配置保存成功');
};
</script>

筛选

vue2

vue3

暂无数据

设置`filters`为`true`，字典用法和普通用法一致,`filterMethod`为自定义的筛选逻辑，`filter-multiple`筛选的数据为多选还是单选，默认为 `true`

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  {
    name: '张三',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      formatter: (row, value, label, column) => {
        return row.name + '自定义';
      }
    },
    {
      label: '性别',
      prop: 'sex',
      filters: true,
      dicData: [
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      filterMethod: (value, row, column) => {
        return row.sex === value;
      }
    }
  ]
});
</script>

默认排序

vue2

vue3

暂无数据

设置`defaultSort`一个属性接受`prop`排序的字段和`order`排序的方式俩个属性，初始化的时候根据设置默认排序,`order`中接受 `ascending` 表示升序，`descending` 表示降序，回调`sort-change`方法返回排序参数

<template>
  <tvue-crud :data="data"
             :option="option1"
             @sort-change="sortChange"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  {
    name: '张三',
    sex: '男'
  },
  {
    name: '李四',
    sex: '女'
  }
]);

const option1 = ref({
  defaultSort: {
    prop: 'name',
    order: 'descending'
  },
  border: true,
  column: [
    {
      sortable: true,
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
});

function sortChange (val) {
  ElMessage.success(JSON.stringify(val));
}
</script>

冻结列

提示

配置fixed为true即可实现冻结列

vue2

vue3

暂无数据

配置`indexFixed`,`selectionFixed`,`expandFixed`可以配置序号，多选，面板是否为冻结,当然你也可以配置他们的宽度`indexWdth`,`selectionWidth`,`expandWidth`

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  {
    id: 1,
    name: '张三',
    sex: '男'
  },
  {
    id: 2,
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  index: true,
  indexFixed: false,
  indexWidth: 100,
  selection: true,
  selectionWidth: 100,
  selectionFixed: false,
  expand: true,
  expandWidth: 100,
  expandFixed: false,
  column: [
    {
      label: '姓名',
      fixed: true,
      prop: 'name'
    },
    {
      width: 500,
      label: '性别',
      prop: 'sex'
    }
  ]
});
</script>

单元格和表头样式

提示

配置className和labelClassName配置单元格和表头样式名称

vue2

vue3

暂无数据

配置`indexClassName`,`selectionClassName`,`expandClassName`可以配置序号，多选，面板列单元格的样式名称,配置`indexLabelClassName`,`selectionLabelClassName`,`expandLabelClassName`表头样式名称

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  {
    id: 1,
    name: '张三',
    sex: '男'
  },
  {
    id: 2,
    name: '李四',
    sex: '女'
  }
]);

const option = ref({
  index: true,
  indexClassName: 'indexClassName',
  indexLabelClassName: 'indexLabelClassName',
  selection: true,
  selectionClassName: 'selectionClassName',
  selectionLabelClassName: 'selectionLabelClassName',
  expand: true,
  expandClassName: 'expandClassName',
  expandLabelClassName: 'expandLabelClassName',
  column: [
    {
      label: '姓名',
      prop: 'name',
      className: 'className',
      labelClassName: 'labelClassName'
    },
    {
      width: 500,
      label: '性别',
      prop: 'sex'
    }
  ]
});
</script>

列拖拽排序

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>

vue2

vue3

暂无数据

`columnSort`设置为`true`即可开启拖拽功能，没有回调用方法直接修改`option`中的顺序，`column-sortable-change`拖拽回调方法

<template>
  <tvue-crud :option="option"
             :data="data"
             @column-sortable-change="columnSortableChange"></tvue-crud>
</template>
 
 <script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'

const data = ref([
  {
    text1: '内容1-1',
    text2: '内容1-2'
  },
  {
    text1: '内容2-1',
    text2: '内容2-2'
  },
  {
    text1: '内容3-1',
    text2: '内容3-2'
  }
]);

const option = ref({
  columnSort: true,
  column: [
    {
      label: '列内容1',
      prop: 'text1'
    },
    {
      label: '列内容2',
      prop: 'text2'
    }
  ]
});
function columnSortableChange (oldIndex, newIndex) {
  ElMessage.success(`${oldIndex}, ${newIndex}`);
  console.log(oldIndex, newIndex);
}
 </script>

自定义列

vue2

vue3

暂无数据

设置列的属性`slot`为`true`时，在卡槽中用`prop`作为卡槽的名字即可

<template>
  <tvue-crud :data="data"
             :option="option">
    <template #name="scope">
      <el-tag>{{scope}}</el-tag>
    </template>
  </tvue-crud>
</template>
<script setup>
import { ref } from 'vue'
const data = ref([
  {
    name: '张三',
    sex: '男'
  }, {
    name: '李四',
    sex: '女'
  }
])
const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
})
</script>

render 渲染

vue2

vue3

暂无数据

<template>
  <tvue-crud :data="data"
             :option="option"></tvue-crud>
</template>
<script setup>
import { ref, h } from 'vue'
const data = ref([
  {
    name: '张三',
    sex: '男'
  }, {
    name: '李四',
    sex: '女'
  }
])
const option = ref({
  column: [
    {
      label: '姓名',
      prop: 'name',
      render: ({ row }) => {
        return h('p',
          {
            attrs: { id: 'box' },
            class: { 'demo': true },
            style: { color: 'pink', lineHeight: '30px' },
          }, row.name + 'Hello World Avue')
      }
    },
    {
      label: '性别',
      prop: 'sex'
    }
  ]
},)
</script>

列合并

提示

如果数据不确定参考动态数据行和列合并

vue2

vue3

暂无数据

通过给传入`spanMethod`方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行`row`、当前列`column`、当前行号`rowIndex`、当前列号`columnIndex`四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表`rowspan`，第二个元素代表`colspan`。 也可以返回一个键名为`rowspan`和`colspan`的对象

<template>
  <tvue-crud :data="data"
             :option="option"
             :span-method="spanMethod"></tvue-crud>
</template>
<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: '12987122',
    name: '王小虎',
    amount1: '234',
    amount2: '3.2',
    amount3: 10
  },
  {
    id: '12987123',
    name: '王小虎',
    amount1: '165',
    amount2: '4.43',
    amount3: 12
  },
  {
    id: '12987124',
    name: '王小虎',
    amount1: '324',
    amount2: '1.9',
    amount3: 9
  },
  {
    id: '12987125',
    name: '王小虎',
    amount1: '621',
    amount2: '2.2',
    amount3: 17
  },
  {
    id: '12987126',
    name: '王小虎',
    amount1: '539',
    amount2: '4.1',
    amount3: 15
  }
])
const option = ref({
  border: true,
  menu: false,
  column: [
    {
      label: 'ID',
      prop: 'id'
    },
    {
      label: '姓名',
      prop: 'name'
    },
    {
      label: '数值 1',
      prop: 'amount1'
    },
    {
      label: '数值 2',
      prop: 'amount2'
    },
    {
      label: '数值 3',
      prop: 'amount3'
    }
  ]
})
function spanMethod ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>